如何执行内的代码只有当我展示它的容器时？

发布于 2024-12-27 02:14:09 字数 801 浏览 0 评论 0原文

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

原文

I have this code :

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

When I load the page, I see the scripts loaded from external source, also if the div is hidden. The scripts call with some API and generate HTML/Javascript.

Well, what I'm looking for is to force the script to be unloaded if the parent is hidden; than, when I'll show it (through the link), load the script inside the div.

How can I do it? I'll avoid AJAX.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

原谅过去的我 2025-01-03 02:14:09

更新：

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

UPDATED:

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");
    });
});

回复收藏 0 原文

肩上的翅膀 2025-01-03 02:14:09

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

<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();
});

If I understand it correctly, you just want to delay the running of arbitrary scripts that are provided by the third party? Would something like this work?

<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");
});

Has the downside that you can't pre-fetch the HTML content, but I don't see any other way.

EDIT: ok, it looks like you edited the question whle I was typing this up... so YOU control the content of invisibleDiv, but you want to delay the loading of in.js? try this...

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

Again, you have to make the user wait while the script downloads, hence my addition of pleaseWaitDiv

More edit:
New up a script node and append it.

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();
});

回复收藏 0 原文