将内容动态插入 iframe - jquery 不起作用答案

【问题标题】：dynamically inserting content into iframe - jquery not working将内容动态插入 iframe - jquery 不起作用
【发布时间】：2016-09-10 22:51:42
【问题描述】：

当我有一个带有 iframe 的静态页面时，jquery 工作正常。但是，如果我动态生成完全相同的 html，则 jquery 不会。如果我检查 chrome 中的元素并复制动态生成的 iframe 内容并将其保存为静态页面，它就可以工作。

静态和 jQuery 作品：

test.html:

...
<iframe name="result" sandbox="allow-popups allow-scripts allow-same-origin allow-modals" frameborder="0" marginwidth="0" marginheight="0" src="/iFrame" width="100%" height="900px"></iframe>
...

iFrame.html:

<html>
  <head>
    <script type="text/javascript" src="/javascripts/jquery-3.1.0.min.js"></script>
    <style type="text/css">.test { display:inline-flex; padding-top:10px; padding-bottom: 10px; padding-left: 40px; padding-right: 40px; background-color:rgb(50,100,230); color:white;  justify-content:center; align-items:center; font-size:20pt; font-weight:lighter; font-family: sans-serif }</style>
    <script type="text/javascript">
      //<![CDATA[
      $(document).ready(function() {$('.test').text('hello');});
      //]]>
    </script>
    <style type="text/css">.iFrameStyle: { margin:10px; }</style>
  </head>
  <body class="iFrameStyle">
    <div class="test">test</div>
  </body>
</html>

结果：

动态生成此 iFrame - jQuery 无法加载

iframe 的 chrome 检查器

   <html>
      <head>
        <script type="text/javascript" src="/javascripts/jquery-3.1.0.min.js">               
        </script>
        <style type="text/css">
          .test { display:inline-flex; padding-top:10px; padding-bottom: 10px; padding-left: 40px; padding-right: 40px; background-color:rgb(50,100,230); color:white;  justify-content:center; align-items:center; font-size:20pt; font-weight:lighter; font-family: sans-serif }
         </style>
         <script type="text/javascript">//<![CDATA[
           $(document).ready(function() { 
              $('.test').text('hello');
           });
    //]]>
    </script>
   <style type="text/css">.iFrameStyle: { margin:10px; }</style>
   </head>
    <body class="iFrameStyle"><div class="test">test</div></body></html>

结果（应该是你好）

iframe 内容是如何动态生成的：

function showPreview() {
    var button = $('.createComponentPreview');
    var update = $('.updateComponentPreview');
    update.fadeIn();
    //set the name above the card
    var name = $('.componentName').val();
    if (name === '') {
      name = $('.componentTempName').text();
    }
    $('.componentNameVal').text(name);

    //set the iframe contents
    var sandbox = $('.sandboxed');
    var html = $('textarea[name="html"]').val();
    var css = $('textarea[name="css"]').val();
    var js = $('textarea[name="js"]').val();

    //remove any previous content
    var head = sandbox.contents().find('head');
    var body = sandbox.contents().find('body');
    head.empty();
    body.empty();

    //insert
    var htmlContainer = document.createElement('div');
    var cssContainer = document.createElement('style');
    var jsContainer = document.createElement('script');
    jsContainer.setAttribute('type', 'text/javascript');
    cssContainer.setAttribute('type', 'text/css');
    var iFrameStyle = $(cssContainer).clone();
    $(head).append(cssContainer);
    $(head).append(jsContainer);
    $(html).append(htmlContainer);
    $(cssContainer).text('\n\t'+css+'\n');
    $(head).append(iFrameStyle);
    iFrameStyle.append('.iFrameStyle: { margin:10px; }');

    //append any environment scripts
    for (var i in componentOptions) {
      if (componentOptions[i] == 'jquery') {
        head.prepend('<script type="text/javascript" src="/javascripts/jquery-3.1.0.min.js"></script>');
        js = '$(document).ready(function() {'+js+'});';
      }
      else if (componentOptions[i] == 'react') {
        head.prepend('<script type="text/javascript" src="react-dom.min.js"></script>');
        head.prepend('<script type="text/javascript" src="react.min.js"></script>');
      }
      else if (componentOptions[i] == 'noMargin') {
        iFrameStyle.append('.iFrameStyle { margin:0px; }');
      }
      else if (componentOptions[i] == 'alignCenter') {
        iFrameStyle.append('.iFrameStyle { display:flex; justify-content:center; align-items:center }');
      }
    }
    body.removeAttr('marginwidth').removeAttr('marginheight');
    body.addClass('iFrameStyle');
    body.prepend(html);
    $(jsContainer).text('//<![CDATA[\n'+js+'\n//]]>\n');

    sandbox.css('min-height', '300px');
    sandbox.css('width', '100%');
    var card = $('.contentContainer.expandable').fadeIn();


    button.text('Close Preview');
    button.attr('previewMode', 'true');
  }

我收到的错误信息：

ReferenceError: $ is not defined

chrome 开发者控制台中指向此错误的链接显示：

//<![CDATA[
$(document).ready(function() {$('.test').text('hello');});
//]]>

工作的静态和动态的非工作 iframe 都包含完全相同的 jquery url，我没有收到 404 错误。

我坚持这一点，所以任何帮助表示赞赏！

谢谢！

【问题讨论】：

标签： javascript jquery html iframe

【解决方案1】：

我有一些使用 iframe 的经验，我认为您这样做是在试图滥用 iframe 的目的。 iframe 旨在在您的网站上显示来自第三方网站的内容。

在这种情况下，这意味着您正在尝试使用 jQuery 动态加载内容。您看到的错误消息意味着未加载 jQuery。你没有具体说明你的“showPreview()”是在哪里定义和调用的，但是你注意到你在这个函数中混合使用了 vanilla JS 和 jquery 吗？

function showPreview() {
    var button = $('.createComponentPreview');
    var update = $('.updateComponentPreview');

这又在运行脚本时更改为：

function showPreview() {
    var button, update;
    button = $('.createComponentPreview');
    update = $('.updateComponentPreview');

现在浏览器“看到”一个美元符号并抱怨它不知道它的含义。这基本上是因为当时（！）您没有将 jquery 添加到函数中。

在您的情况下，您正试图通过其类名查找元素。将其改为香草 JS

function returnFirstElementOfClass(className) {
   var matchingElements = getElementsByClassName(document, className),
   return elements[0];
}

然后将代码更改为：

function showPreview() {
    var button, update;
    button = returnFirstElementOfClass('createComponentPreview');
    update = returnFirstElementOfClass('updateComponentPreview');

您必须重复此操作，直到您加载了 jquery，然后使用委托事件。在我看来，我看到了一个更简单的解决方案。不要为此使用 iframe，而是将 iframe 用于其预期目的。而是将内容加载到容器中，这样您就可以访问已在 DOM 中加载的所有脚本。使用 iframe SRC 属性来控制加载什么页面以及何时加载。

【讨论】：