javascript - 将包含外部js的div追加到js中的另一个div无法正确执行

Question

我正在 div 内调用第三方脚本标记。这个第三方 js 渲染一个 iframe 并将其内容放入我放入此标签的 div 中。但是我看到了 iframe，但 iframe 的头部和主体中没有任何内容，似乎 js 没有正确执行，因此我看不到 div 内的内容。我只能看到 iframe 正在生成并附加到 div，但看不到其中的任何内容。这就是我放置第三方标签的方式。(PS基本上第三方脚本标签会提取object1的属性“abc”的值并执行。)

html 文件:

< div id= "div2" style="display:none" >
< script >
 var object1 = {
    abc: "this is a fruit"
};
< /script>
<script type="text/javascript" src="thirdpartyjscode.js"></script>
< /div >

js文件:

$('#div1').append($('#div2').show());

此代码将向我显示 div1 内的 div2，但 div2 内的脚本确实得到评估，并且我看到 iframe 附加到 div2，但我没有看到其中的任何内容。为什么会出现这种情况呢？我不明白。我读到也许使用 eval() 会有所帮助，但我不太确定

这就是我执行此操作后控制台中内容的样子，然后我控制台记录了“内容”

var content = $('#div2').detach().html();
$('#div1').append('<div>', {
    id: 'div2',
    html: content
});

console.log(content) 给了我以下内容..但我没有看到 iframe 附加到 div2

          <script type="text/javascript">
                var object1 = {
                    abc: "this is a fruit"
                };
            </script>



 <script type="text/javascript" src="thirdpartyjscode.js"></script><iframe id="abc_61086936097182" src="" width="610" height="100%" frameborder="0" scrolling="no" marginwidth="0" marginheight="0" style="display: block; height: 871px;"></iframe>

Answer 1

将现有 DOM 元素附加到另一个元素只会移动 DOM 中的元素。 Javascript 仅在添加到 DOM 时执行，而不是在 DOM 中重新定位时执行。如果要执行，需要复制一份:

var content = $('#div2').detach().html();
$('#div1').append('<div>', {
    id: 'div2',
    html: content
});