Как я могу выполнить код внутри <script></script> только тогда, когда я покажу его контейнер?

Question

У меня этот код:

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

ОБНОВЛЕНО:

• ДЕМО : 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

Попробуйте это:

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

Answer 4

Вы можете привязать его к вашей showDiv функции щелчка, встроенные скрипты обрабатываются сразу ... Единственное, о чем я могу думать, это загрузить скрипт через ajax, который вам не нужен.