个人中心
gpt4 book ai didi

javascript - jquery 在即时创建时在 iframe 中运行

转载 作者：行者123 更新时间：2023-12-02 18:48:49 25 4
gpt4 key购买 nike

我尝试首先创建一个 iframe，然后将 jQuery 库注入(inject)其中，然后发出警报，提示 jQuery 已加载。

jQuery 库正在按预期插入到 iframe 头部，并且 jQuery 上的警报会加载到正文中。

问题是，它不显示警报，而是显示 jQuery 未定义。

有人可以提出建议吗？

这是代码

<!doctype html>
<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
        <title>iFrame Test</title>
    </head>
    <body>
        <script>
            var insertScript = function(src){
                var script = document.createElement('script');
                script.type = 'text/javascript';
                script.async = false;
                script.src = src;
                $('iframe').contents().find('head')[0].appendChild(script);
            }

            var insertScriptContent = function(code){
                var script = document.createElement('script');
                script.type = 'text/javascript';
                script.async = false;
                script.innerHTML  = code;
                $('iframe').contents().find('body')[0].appendChild(script);
            }

            $(function(){
                $('iframe').load(function(){
                    var contents = $('iframe').contents();
                    insertScript('https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js');
                    insertScriptContent('jQuery(function(){ alert("loaded"); });');
                });
            });
        </script>

        <div class="output">
            <iframe></iframe>
        </div>
    </body>
</html>

最佳答案

您正在异步加载 jQuery(尽管有 script.async=false)，然后立即加载警报脚本。该脚本运行时 jQuery 尚未加载，因此您将获得未定义的 jQuery 引用。

作为快速修复，我添加了一个 setInterval() ，它会等待 jQuery 被定义。我还进行了以下其他更改:

  • 删除了 script.async = false; 这两个地方，因为它没有任何好处。
  • 删除了 $('iframe').load() 包装器。当我测试您的代码时，该包装器中的回调函数根本不会被调用。这并不奇怪，因为此时 iframe 中没有加载任何内容。
  • 更改了使用 document.createElement() 的两个位置，改为使用 iframe 文档(在我的版本中称为 iframedoc)。使用 document 可以正常工作，但我更愿意在它们将加载到的文档下创建这些脚本。
  • 将 ...find(something)[0].appendChild(); 的两个实例更改为更简单的 ...find(something).append();.

这是工作代码:

<!doctype html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript">
</script>

    <title>iFrame Test</title>
</head>

<body>
    <script type="text/javascript">

        $(function() {
            var $contents = $('iframe').contents();
            var iframedoc = $contents[0];

            var insertScript = function(src) {
                var script = iframedoc.createElement('script');
                script.type = 'text/javascript';
                script.src = src;
                $('iframe').contents().find('head').append(script);
            }

            var insertScriptContent = function(code) {
                var script = iframedoc.createElement('script');
                script.type = 'text/javascript';
                script.innerHTML = code;
                $('iframe').contents().find('body').append(script);
            }

            insertScript('https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js');

            insertScriptContent(
                'var timer = setInterval( function() {' +
                    'if( typeof jQuery == "undefined" ) return;' +
                    'clearInterval( timer );' +
                    'jQuery(function(){ alert("loaded"); });' +
                '}, 50 )'
            );

        });
    </script>

    <div class="output">
        <iframe></iframe>
    </div>
</body>
</html>

这对于第一次通过来说很好，但是还有一种更简单的方法可以做到这一点。我尝试用 jQuery 代码替换这两个脚本函数，所以这是另一个工作版本:

<!doctype html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript">
</script>

    <title>iFrame Test</title>
</head>

<body>
    <script type="text/javascript">

        $(function() {
            var $contents = $('iframe').contents();

            $contents.find('head').append(
                '<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"><\/script>'
            );

            $contents.find('body').append(
                '<script>' +
                    'jQuery(function(){ alert("loaded"); });' +
                '<\/script>'
            );

        });
    </script>

    <div class="output">
        <iframe></iframe>
    </div>
</body>
</html>

奇怪的是，这个在没有setInterval()计时器的情况下也能正常工作，所以我把这段代码拿出来了。我不确定为什么它会起作用 - 这不是一种令人安慰的感觉 - 但它似乎在我测试的浏览器中是一致的。

最后，这是一个不起作用的实验。过去，我曾使用 document.write() 定位 iframe，效果良好。所以我想我会尝试一下:

<!doctype html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript">
</script>

    <title>iFrame Test</title>
</head>

<body>
    <script type="text/javascript">

        $(function() {
            var $contents = $('iframe').contents();
            var iframedoc = $contents[0];

            iframedoc.write(
                '<!doctype html>',
                '<html>',
                '<head>',
                    '<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.js"><\/script>',
                '</head>',
                '<body>',
                    '<script>',
                        'debugger;',
                        'jQuery( function(){ alert("loaded"); } );',
                    '<\/script>',
                '</body>',
                '</html>'
            );
        });
    </script>

    <div class="output">
        <iframe></iframe>
    </div>
</body>
</html>

此版本确实将 jQuery 和内联脚本加载到 iframe 中，并执行内联脚本中的 jQuery() 调用。但它永远不会调用带有 alert() 的回调函数。这实际上与我正在做的事情有关，所以明天我可能会再看一下，但与此同时，我留下了实验代码，以防您好奇。我将其更改为在 iframe 内使用未压缩的 jQuery，以便于调试，并在其中留下了一个 debugger; 语句。

关于javascript - jquery 在即时创建时在 iframe 中运行，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16052421/

25 4 0
文章推荐： javascript - 是否可以在网站上勾勒出非矩形对象的轮廓？
文章推荐： java - 需要帮助通过省略其中一些来计算数字的总和
文章推荐： azure-devops - 在 Azure DevOps 中的不同项目之间共享变量
文章推荐： javascript - 如何添加一个功能，以便按钮将使 div 消失/出现？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com