只有在加载了外部内容后才能运行脚本

Question

在有人问之前，这不是关于如何在页面加载后运行脚本之类的常见问题。

基本上，我有这个例子（fiddle），

$.getScript("http://platform.linkedin.com/in.js").done(function() {
     alert('hello');   
    });

其中警报在我点击后立即触发，因为它在AJAX调用结束时触发。我的意图是只有在LinkedIn公司的个人资料显示在页面上后才启动警报，这样我就可以通过jQuery访问其元素。有人知道如何做到这一点，或者这是否可能？

提前感谢！

Answer 1

您的问题是因为加载的是另一个文档（iframe上的另一个DOM树）。脚本加载结束后，必须检查此新文档是否已准备就绪。

它是关于这两个问题的答案：

jQuery.ready在动态插入的iframe 中

IFRAME加载完成时的Javascript回调？

Answer 2

文档中有一些不错的tid位。

var myCallBack = function() {
    alert('hello');   
}

$("#showDiv").click(function(){
    $.getScript("http://platform.linkedin.com/in.js?async=true", function() {
        IN.init({
            onLoad: "myCallBack"
        });
    });
}); 

Answer 3

https://api.jquery.com/jQuery.getScript/

$.getScript( "http://platform.linkedin.com/in.js" )
  .done(function( script, textStatus ) {
    console.log( textStatus );
    // You can start some function that periodically will check the loaded content.
    // Once it is detected stop that event.
  })
  .fail(function( jqxhr, settings, exception ) {
    $( "div.log" ).text( "Triggered ajaxError handler." );
});

而且https://developer.linkedin.com/

我刚刚为你做了一些特别调查

这是工作代码。享受

<a href="#" id="showDiv">Show Agency</a>
<div id="invisibleDiv">
    <script type="IN/CompanyProfile" data-id="1035" data-format="inline" data-related="false">
    </script>
</div>
<script>
    $(function(){
    $("#showDiv").click(function(){
        $.getScript("http://platform.linkedin.com/in.js").done(function(script, textStatus) {
            if (textStatus == "success")
            {
              console.log( textStatus );
              var intervalID = setInterval(function(){
                  console.log("time + 1000" );
                  if ($('#uploads').contents().find('iframe').contents().find('.company-logo')) {
                      console.log("hello!!!");
                  }
                  else {
                      console.log("wahaat???");
                  };
            }, 1000);
         }
        });
    });
    });
</script>