仅当我将显示其容器时，如何才能在 <script></script> 中执行代码？

Posted 2023-02-24

【中文标题】仅当我将显示其容器时，如何才能在 <script></script> 中执行代码？

【英文标题】：How can I execute the code inside a <script></script> only when I'll show its container?

【发布时间】：2012-01-16 16:17:45

【问题描述】：

我有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。

【参考方案1】：

更新：

演示：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");
    );
);

【参考方案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();
);

【讨论】：

是的，但是你不能用这种方法“加载”带有属性的源，例如<script type="IN/CompanyProfile" data-id="1035" data-format="inline" data-related="false"></script>

噢噢噢噢噢噢噢噢噢噢噢噢噢噢噢噢噢噢噢噢噢噢噢噢噢噢噢噢噢噢噢噢噢噢噢噢噢噢噢噢噢噢噢噢噢噢噢噢噢噢噢噢噢噢噢噢噢噢噢噢噢噢！您可以创建一个脚本元素并自己附加它。给我一秒钟进行第三次编辑：p

【参考方案3】：

您可以将其绑定到您的 showDiv 点击函数，内联脚本会立即处理...我唯一能想到的另一件事是通过您不想要的 ajax 加载脚本。

【讨论】：

是的，我应该！但它不是我要找的 :) 事实上，我必须从 src 加载一些脚本到 div 中，而不是警报 :)

【参考方案4】：

试试这个：

http://jsfiddle.net/sXJa6/6/