通过 DOM、insertAdjacentHTML 或 document.write 将 SCRIPT 添加到 IFRAME

2024-03-22

我需要将 SCRIPT 添加到沙盒 IFRAME 中,并且我试图避免使用document.write (see here https://stackoverflow.com/questions/4537963/what-are-alternatives-to-document-write and here https://stackoverflow.com/questions/802854/why-is-document-write-considered-a-bad-practice)但是 DOM 版本没有按顺序执行脚本。在下面的示例中,在内联脚本执行时 jQuery 尚未加载,而document.write版本首先加载 jQuery,然后执行内联脚本。

出于我的目的(确保在运行内联脚本之前加载所有主要库,请参阅here http://www.stevesouders.com/blog/2012/04/10/dont-docwrite-scripts/) document.write可能是正确的方法(但 DOM 更好,只是没有按应有的方式工作),但我更愿意在可能的情况下允许异步下载,同时确保脚本标记按顺序执行。

我有一种感觉,DOM 方法确保了顺序srced SCRIPT 标签,但不是内联标签...但是如果有人可以帮助我获得一个与 DOM 一起使用的版本,以预期的顺序执行脚本,那就太好了!

另外...谁能向我解释一下为什么insertAdjacentHTML版本根本不起作用!?

<html>
    <head>
        <title>Testing DOM -vs- document.write Script additions...</title>
        <script>
            var $sandboxWin,
                $jQuery = document.createElement('script'),
                $script = document.createElement('script'),
                $head = document.head,
                sType = "insert"
            ;

            $head.insertAdjacentHTML('afterbegin', '<iframe id="neek" style="display:none;" sandbox="allow-scripts allow-same-origin"></iframe>');
            $sandboxWin = document.getElementById("neek").contentWindow;

            switch (sType) {
                case "dom": {
                    $jQuery.type = "text/javascript";
                    $jQuery.src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js";
                    $sandboxWin.document.head.appendChild($jQuery);

                    $script.type = "text/javascript";
                    $script.text = "console.log('via appendChild:'); console.log($);"; //.innerHTML
                    $sandboxWin.document.head.appendChild($script);
                    break;
                }
                case "insert": {
                    $sandboxWin.document.head.insertAdjacentHTML('afterbegin', "<script src='jquery.min.js'><\/script>");
                    $sandboxWin.document.head.insertAdjacentHTML('afterbegin', "<script>console.log('via insertAdjacentHTML:'); console.log($);<\/script>");
                    break;
                }
                default : {
                    $sandboxWin.document.write(
                        "<script src='jquery.min.js'><\/script>" +
                        "<script>" + 
                            "console.log('via document.write:'); console.log($);" +
                        "<\/script>"
                    );
                    $sandboxWin.document.close();
                }
            }
        </script>
    </head>
    <body>
        Testing DOM -vs- document.write Script additions...
    </body>
</html>

None

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

通过 DOM、insertAdjacentHTML 或 document.write 将 SCRIPT 添加到 IFRAME 的相关文章

  • React Native 将样式设置为 State

    我想用backgroundColor of style1作为一种状态 并在函数中改变它change 我怎样才能访问style1 我的观点是调用该函数change从另一个函数 使按钮将其颜色更改为黄色 然后在一段时间后再次将其颜色更改为蓝色
  • Javascript Firefox - 如果 @import 存在于样式表中,则无法查询 cssRules - bug 或预期行为?

    如果 import 存在于 css 样式表中 我无法查询 cssRules 是否符合网络标准 或者知道 Firefox 的限制 注意 我正在从同一域导入 css 文件 var style rules document styleSheets
  • 如何使用 java/vb 脚本调用自定义 ActiveX dll 中的方法

    我使用 VB6 创建了一个 ActiveX dll 并使用打包和部署向导将其打包 生成了一个 cab 文件和一个演示 HTML 页面 此 ActiveX dll 包含一个 simgle 方法 该方法返回字符串且不接受任何参数 我遇到的麻烦是
  • 获取单词中重复次数最多的字母的数量

    我正在尝试计算单词中重复次数最多的字母的数量 function GreatestCount str var count for var i 0 i
  • 等待 JavaScript 中 Json 调用完成

    我正在使用下面的json调用在我的 javascript 方法中 function go123 var cityName var temp getJSON https abc in api city callback args functi
  • 如何检索 jquery $.ajax 对象的responseJSON属性[重复]

    这个问题在这里已经有答案了 我有这个 JavaScript ajax ajax type GET url DBConnect php data dataType json success function data error functi
  • 在 HTML SELECT 标记中禁用键盘

    我想禁用 HTML SELECT 标记的键盘 以便用户只能使用鼠标来选择选项 我试过了event cancelBubble true on the onkeydown onkeyup and onkeypress没有运气的事件 有任何想法吗
  • Jquery 动画与 CSS 浮动

    我的代码有问题 宽度似乎可以工作 但浮动没有 这里是 这是一个例子 http jsfiddle net v82ck http jsfiddle net v82ck 问题 悬停时菜单上的浮动属性不会改变 我希望每个菜单元素下方的线在悬停该菜单
  • Atom“自动完成”不起作用

    因此 当您安装 Atom 时 autocomplete 会随其一起提供 并且默认情况下处于启用状态 当我编写代码时 什么也没有显示 为什么 是否需要配置任何文件才能正常工作 In autocomplete plus settings pag
  • 如何使用 jquery 从 iframe 内部滚动?

    我正在使用一个 Shadowbox 它生成一个 iframe 以在页面上显示产品详细信息 由于详细信息页面可能相当长 因此客户端需要一个 更多 按钮来向下滚动页面 显然 iframe 右侧的滚动条还不够 这是我为了让 iframe 滚动而尝
  • 嵌套对象的 AJV 模式验证

    函数返回的对象看起来像这样 answer vehicle type 1 message Car model VW color red 答案 对象始终存在 其他字段基于 vehicle type E g 如果vehicle type 1 则有
  • 使用 test() 通过正则表达式进行信用卡验证

    我正在尝试完成一些作业 看来这本书可能做错了 我有一个简单的 html 页面 允许用户在我们的例子中选择信用卡 美国运通卡 然后 用户输入一个数字并根据正则表达式评估该数字 我的问题最终是当 test 计算它返回的数字时是布尔值还是字符串
  • 日期时间的自定义 JavaScriptConverter?

    我有一个对象 它有一个 DateTime 属性 我想通过 AJAX JSON 将该对象从 ashx 处理程序传递回网页 我不想使用第 3 方控件 当我这样做时 new JavaScriptSerializer Serialize DateT
  • 如何获取 svgElement 的比例?

    我正在研究 svg div style width 300 height 300 div
  • Rails - 使链接与 ajax 一起工作

    我有一个链接 应该使用 ajax 加载它旁边的部分内容 而无需重新加载页面 链接在这里 这是链接应该转到的控制器 class ProfilesController lt ApplicationController def profile f
  • 检查 href 中是否存在 jQuery 中的查询字符串

    我目前有一段 jQuery 用于附加带有一些位置信息的 URL jQuery a attr href function return this href location 123 abc 我的问题是大多数链接都有一个 其中使用上面的 就可以
  • 在javascript中定义Date.parse的格式[重复]

    这个问题在这里已经有答案了 我正在使用 Date parse 将字符串转换为 JavaScript 中的日期 但是 如果字符串看起来像 10 11 2016 它会被解释为 2016 年 10 月 11 日 我需要将其解释为 2016 年 1
  • JavaScript 数组中的负索引是否会影响数组长度?

    在javascript中我定义了一个像这样的数组 var arr 1 2 3 我也可以做 arr 1 4 现在如果我这样做 arr undefined 我也失去了对值的引用arr 1 所以对我来说 从逻辑上来说 arr 1 也是arr 但是
  • JavaScript 右移负数

    这是片段 var i 101 console log 101 i toString 2 console log 101 gt gt 1 i gt gt 1 toString 2 var l 101 console log 101 l toS
  • Javascript:修改原型不会影响现有实例[重复]

    这个问题在这里已经有答案了 我创建了原型的 2 个实例 更改了原型中的函数 更改反映在两个实例中 很棒 但是 当我通过删除该函数来修改原型时 该函数对于现有实例仍然存在 function A this name cool A prototy

随机推荐