动态加载 JavaScript 库并调用答案

【问题标题】：Dynamically load a JavaScript library and call动态加载 JavaScript 库并调用
【发布时间】：2020-01-26 19:02:29
【问题描述】：

尝试动态加载 JavaScript 库。错误 - 未定义警报。我有带有库的 HTML 代码（警报）。我无法将其插入 iframe

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <script src="https://code.jquery.com/jquery-3.4.1.js"></script>
</head>
<body>

<iframe class="ifr"></iframe>

<script>

    $(document).ready(function () {
        var iframe =
            '<p>Text 1</p>' +
            '<script src="//cdn.jsdelivr.net/npm/alertifyjs@1.13.1/build/alertify.min.js"><\/script>' +
            '<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/alertifyjs@1.13.1/build/css/alertify.min.css"/>' +
            '<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/alertifyjs@1.13.1/build/css/themes/default.min.css"/>' +
            '<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/alertifyjs@1.13.1/build/css/themes/semantic.min.css"/>' +
            '<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/alertifyjs@1.13.1/build/css/themes/bootstrap.min.css"/>' +
            '<p>Text 2</p>' +
            '<script>alertify.success("Success message");<\/script>';

        $(".ifr").contents().find("body").html(iframe);
    });


</script>

</body>
</html>

jQuery 示例。错误：$ 未定义。我有带有库 (jQuery) 的 HTML 代码。我无法将其插入 iframe

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <script src="https://code.jquery.com/jquery-3.4.1.js"></script>
</head>
<body>

<iframe class="ifr"></iframe>

<script>

    $(document).ready(function () {
        var iframe =
            '<p>Text 1</p>' +
            '<script src="https://code.jquery.com/jquery-3.4.1.js"><\/script>' +
            '<p>Text 2</p>' +
            '<script>$("p").remove();<\/script>';

        $(".ifr").contents().find("body").html(iframe);
    });


</script>

</body>
</html>

【问题讨论】：

它在 chrome 上运行良好。
它不工作screenshot
查看我的答案，我相信您想在将 jquery 添加到 iframe 后触发您的代码，但是它有点小故障，因此，您可以像我在代码中所做的那样，这将注入jquery 脚本，然后它将在 jquery 加载后运行您的代码。

标签： javascript jquery iframe

【解决方案1】：

这应该可以，尝试动态加载 jquery，然后在调用 onload 时它可以触发您的自定义代码。看我的例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <script src="https://code.jquery.com/jquery-3.4.1.js"></script>
</head>
<body>
<iframe class="ifr"></iframe>
<script>
    $(document).ready(function () {
        var iframe =
            '<p>Text 1</p>' +
            '<script src="https://code.jquery.com/jquery-3.4.1.js"><\/script>' +
            '<p>Text 2</p>' +
            '<script>' +
                'var el = document.createElement("script"); ' +
                'el.src = "https://code.jquery.com/jquery-3.4.1.js"; ' +
                'el.onload = function(){ ' +
                '    $("p").remove();        ' +     
                '}; ' +
                'document.getElementsByTagName("body")[0].append(el);' +
            '<\/script>'
        $(".ifr").contents().find("body").html(iframe);
    });
</script>
</body>
</html>

这是脚本本身（未编码，更容易理解）：

<script>
    var el = document.createElement("script");
    el.src = "https://code.jquery.com/jquery-3.4.1.js";
    el.onload = function(){
        // Put your code here that needs jquery.
        $("p").remove();
    };
    document.getElementsByTagName("body")[0].append(el);
</script>

【讨论】：