只有在显示<script></script>的容器时，我才能执行<script></script>中的代码？

Question

我有this代码：

HTML

<a href="javascript:void(0);" id="showDiv">Show Agency</a>

<div id="invisibleDiv">
    <script src="http://platform.linkedin.com/in.js" type="text/javascript"></script>
    <script type="IN/CompanyProfile" data-id="1035" data-format="inline" data-related="false"></script>
</div>

jQuery

$("#showDiv").click(function () {
    $("#invisibleDiv").show();
});

CSS

#invisibleDiv
{
    display:none;
}

当我加载页面时，我看到从外部源加载的脚本，如果div是隐藏的。这些脚本调用一些API并生成HTML/Javascript。

嗯，我要做的是，如果父脚本是隐藏的，则强制卸载该脚本；然后，当我将其显示(通过链接)时，在div中加载该脚本。

我该怎么做呢？我会避免使用AJAX。

Answer 1

更新：

• DEMO：http://jsfiddle.net/HqeD2/

<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>

$(function() {
    $("#showDiv").click(function() {
        $.getScript("http://platform.linkedin.com/in.js");
    });
});

Answer 2

如果我理解正确的话，您只是想延迟第三方提供的任意脚本的运行吗？像这样的东西可以工作吗？

<div id="invisibleDiv" style="display:none">Please wait while we load some stuff from Facebook...</div>

$("#showDiv").click(function(){
    $("#invisibleDiv").show().load("http://facebook.com/whatever/andStuff");
});

它的缺点是您不能预取HTML内容，但我看不到任何其他方法。

编辑:好的，看起来你在我输入的时候编辑了这个问题……所以你控制了invisibleDiv的内容，但是你想延迟in.js的加载吗？试试这个。

$("#showDiv").click(function(){
    $("#pleaseWaitDiv").show();
    $.getScript("http://platform.linkedin.com/in.js", function(){
        $("#pleaseWaitDiv").hide();
        $("#invisibleDiv").show();
    });
});

同样，您必须在脚本下载期间让用户等待，因此我添加了pleaseWaitDiv

更多的编辑:新建一个脚本节点并追加它。

var scriptNode = $("<script></script>")
    .attr("type","IN/CompanyProfile")
    .attr("data-id","1035")
    .attr("data-format","inline")
    .attr("data-related","false");

$("#invisibleDiv").append(scriptNode);
$.getScript("http://platform.linkedin.com/in.js", function(){
    $("#pleaseWaitDiv").hide();
    $("#invisibleDiv").show();
});

Answer 3

你可以把它绑定到你的showDiv点击函数上，内联脚本被正确处理了，我唯一能想到的就是让脚本通过ajax加载，这是你不想要的。