文章/答案/技术大牛

发布

社区首页 >问答首页 >动态加载JavaScript库并调用

问动态加载JavaScript库并调用
EN

Stack Overflow用户

提问于 2020-01-27 03:02:29

回答 1查看 101关注 0票数 2

尝试动态加载JavaScript库。错误-未定义警报。我有HTML代码和库(alertify)。我无法将其插入到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)。我无法将其插入到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>

javascript

jquery

iframe

回答 1

Stack Overflow用户

发布于 2020-01-27 04:54:57

这应该可以工作，尝试动态加载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>

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/59921708

复制

相似问题

问动态加载JavaScript库并调用
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问动态加载JavaScript库并调用EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问动态加载JavaScript库并调用
EN