Question

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

静态＆amp; 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错误。

我坚持这一点，所以感谢任何帮助！

谢谢！

Answer 1

我有使用iframe的经验，我认为你试图通过这样做来滥用iframe的目的。设计iframe是为了显示您网站上第三方网站的内容。

在这种情况下，这意味着您正在尝试使用jQuery动态加载内容。您看到的错误消息表示未加载jQuery。你没有指定你的＆＃34; showPreview（）＆＃34;正在定义和调用BUT（！）你是否注意到你在这个函数中使用了混合的vanilla JS和jquery？

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

这反过来在运行脚本时改为：

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

现在浏览器＆＃34;看到＆＃34;一个美元符号，并抱怨它不知道这意味着什么。这基本上是因为在那个时候（！）你没有将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属性来控制要加载的页面和时间。

将内容动态插入iframe - jquery无效

1 个答案: