javascript - 在用户点击时，将一段 javascript 加载到页面中

Question

我正在我的 html 页面上添加第三方评论插件。由于页面为加载评论插件而建立的连接数量，该插件会稍微减慢页面加载速度。

评论插件将包含在一个 div 中。

我想延迟评论 javascript 的加载，直到访问者单击“添加/阅读评论”按钮/链接。

该页面的语言是 html5。如果可能的话，我希望最好将我的页面保留为 .html页面是 html5 和 css3。

我的ccs3和html5知识一般。我的 javascript 知识很差。我不知道的所有其他语言。

我本来打算使用“添加/阅读评论”按钮/链接，加载一个加载了第三方评论插件的重复页面，但觉得这样做很麻烦，而且会增加更多时间(另一个页面加载然后是插件脚本)让用户在能够发表评论之前等待。

我根本不想加载这个评论插件，甚至在后台加载，直到用户单击按钮。这样做的原因是，当页面加载完成且评论插件不可见时，我不希望用户看到任何页面挂起/仍在加载的指示。

我真诚地希望这对有人来说是有意义的。

答案将不胜感激。谢谢你的时间。

以下是 livefyre 给我插入到我的 html 中的代码..

<div id="SPLUG"> <--- that is the div i am surrounding the comment plugin in


<div id="livefyre-comments"></div>
<script type="text/javascript" src="http://zor.livefyre.com/wjs/v3.0/javascripts/livefyre.js"></script>
<script type="text/javascript">
(function () {
    var articleId = fyre.conv.load.makeArticleId(null);
    fyre.conv.load({}, [{
        el: 'livefyre-comments',
        network: "livefyre.com",
        siteId: "xxxxxx",
        articleId: articleId,
        signed: false,
        collectionMeta: {
            articleId: articleId,
            url: fyre.conv.load.makeCollectionUrl(),
        }
    }], function() {});
}());
</script>
<!-- END: Livefyre Embed -->


</div>

Answer 1

您可以在单击按钮时动态地将外部 JavaScript 插入网页:

<button onclick="addScript()">Click</button>

<script type="text/javascript">
    function addScript() {
        var headTag = document.getElementsByTagName("head")[0];         
        var newScript = document.createElement('script');
        newScript.type = 'text/javascript';
        newScript.src = 'http://code.jquery.com/jquery-1.9.1.min.js';
        headTag.appendChild(newScript);
    }
</script>