Javascript 无法在iframe中加载和运行bootstrap.js

对于一个非常特定的用例（其他Web应用程序中完整页面应用程序部分的某种演示），我需要将html页面中的内容加载到iframe中，应用css并运行js

加载的内容使用js的引导元素。由于加载了许多不同的示例，因此我不想手动将引导js和所需的css添加到每个加载的html片段中（这确实有效），而是在html加载到iframe后，按js添加它

我所做的是：在确保html的DOM完全加载到iframe之后，我添加css和必要的js，如下所示：

$('#'+index+'-iframe-example').contents().find("head").append(
  '<link href="/app/static/css/app.css" rel="stylesheet" type="text/css" />'
);
$('#'+index+'-iframe-example').contents().find("body").append(
  '<script src="/libs/jquery/dist/jquery.js"></script>'
);
$('#'+index+'-iframe-example').contents().find("body").append(
  '<script src="/libs/bootstrap/dist/js/bootstrap.js"></script>'
);

$（'#'+index+'-iframe示例'）.contents（）.find（“head”）.append(
''
);
$（'#'+index+'-iframe示例'）.contents（）.find（“body”）.append(
''
);
$（'#'+index+'-iframe示例'）.contents（）.find（“body”）.append(
''
);

---

现在的问题是：css被正确加载，iframe的内容被正确呈现。js也会被加载和执行，但是iframe中的元素不会做出应有的反应。如果手动将js添加到html代码段中，则可以正常工作

您是否收到任何控制台错误？没有，但如果我输入类似console.log（“hello Bootstrap”）的内容；在bootstrap.js的第一行中，我看到这一行是有效执行的。它只是没有应用到iframe的DOM上（我知道，应该对某些操作做出反应的元素没有）。如果我直接在iframe的dom中添加js，那么一切都会正常工作。你能试着给iframe主体分配一个click事件，看看是否有效吗？尝试在iframe中获取jquery变量。如

$（'iframe'）。获取（0）。内容窗口。$

感谢您的反馈。如果我直接在iframe内部添加该行，它将不起作用，因为iframe是在从外部添加jquery之前呈现的。如果我在添加jquery之后添加该行，会发生一些有趣的事情：执行该行并应用jquery逻辑，但只应用于iframe之外的元素。因此，$（“body”）.html（“test”）行将用“test”替换整个页面的html，而不仅仅是iframe的一部分$（“iframe”）.html（“test”）没有任何影响。若要更改iframe内容，请尝试此

$（'iframe'）.contents（）.find（'body'）.html（'test'）

。是否有任何控制台错误？没有，但如果我输入类似console.log（“hello Bootstrap”）的内容；在bootstrap.js的第一行中，我看到这一行是有效执行的。它只是没有应用到iframe的DOM上（我知道，应该对某些操作做出反应的元素没有）。如果我直接在iframe的dom中添加js，那么一切都会正常工作。你能试着给iframe主体分配一个click事件，看看是否有效吗？尝试在iframe中获取jquery变量。如

$（'iframe'）。获取（0）。内容窗口。$

感谢您的反馈。如果我直接在iframe内部添加该行，它将不起作用，因为iframe是在从外部添加jquery之前呈现的。如果我在添加jquery之后添加该行，会发生一些有趣的事情：执行该行并应用jquery逻辑，但只应用于iframe之外的元素。因此，$（“body”）.html（“test”）行将用“test”替换整个页面的html，而不仅仅是iframe的一部分$（“iframe”）.html（“test”）没有任何影响。若要更改iframe内容，请尝试此

$（'iframe'）.contents（）.find（'body'）.html（'test'）

。