javascript 的动态加载导致目标 iframe 损坏答案

【问题标题】：Dynamic loading of javascript causes target to iframe corruptionjavascript 的动态加载导致目标 iframe 损坏
【发布时间】：2015-02-18 15:10:10
【问题描述】：

我正在渲染一个页面，该页面动态创建一个 iframe 作为页面的一部分。内容在创建时呈现在 iframe 中。我还有一个链接，它“针对” iframe 以呈现其他页面。

在 iframe 中呈现的代码会动态加载 javascript。但是，当您单击指向 iframe 名称的链接时，会创建一个新窗口，就像 target="blank" 一样，而不是 iframe 中的内容呈现。如果我注释掉 javascript 的动态加载，则链接 target= 每次都可以正常工作。

据我所知，我正在正确地进行动态加载。 js代码正确加载并执行。但是，我不确定 DOM 发生了什么来破坏目标。任何帮助将不胜感激。

page1.html:

    <script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>
    <script type="text/javascript">
      var ifr = "<iframe width='998' name='main'
         id='main' src='page2.html' scrolling='no'
         frameborder='1'  height='100'></iframe>";
      $(document).ready(function() {
        $("#content").html(ifr);  
          $('iframe').load(function() {
             this.style.height = 
              this.contentWindow.document.body.offsetHeight + 60 + 'px';
          });
      });
    </script>
   <body>
    <div id="wrapper" style="height: 100px;">
      <p><a href="index1_mgc1.html" target="main">Click Me</a></p>
      <div id="content">
      </div>
    </div>
   </body>

page2.html:

   <script type="text/javascript">
  // var ScriptLoaded = true; 
  if (typeof ScriptLoaded == 'undefined') {
      var scripts = ["js/jquery-1.6.2.min.js"];
      for (i=0; i<scripts.length; i++) {
        var name = scripts[i];
        loadScript(name, function() {
        });
      }
   };

   window.onload = waitForLoad();

   function loadScript(name,callback) {
       var script = document.createElement('script');
       script.type = "text/javascript";
       if (script.readyState) {  // IE
          script.onreadystatechange = function () {
             if (script.readyState == "loaded" ||
                  script.readyState == "completed") {
                script.onreadystatechange = null;
                callback();
             }
          }
       } else {      // Other
         script.onload = function() {
           callback();
         }
       }
       script.src = scripts[i];
       document.getElementsByTagName("head")[0].appendChild(script);
  };
  function waitForLoad() {
    if (typeof jQuery == "undefined") {
       setTimeout(waitForLoad,500);
    }
  };
</script>
<body>
<div class="page">
  this is in an iframe
</div>

【问题讨论】：

当我复制和粘贴您的代码时，它失败的原因是在 JS 中，您不能像这样在多行上声明字符串。尝试在一行中声明var ifr，或使用串联。
感谢 blex 发现这一点。我确实将该声明更改为仅 1 条完整声明。

标签： javascript jquery iframe target

【解决方案1】：

我一直在寻找自然的解决方案，但似乎没有。

target="someIframe" 不喜欢动态创建 iframe 时。以下是您可以在创建 iframe 后放置的解决方法：

$('a[target="main"]').click(function(ev){
    var src = $(this).attr('href');
    $('#main').attr('src', src);
    ev.preventDefault();
});

它会选择每个以iframe为目标的链接，当你点击它们时，它会得到它们的href，将它设置为iframe的src，并阻止链接在新窗口中打开.

【讨论】：

谢谢 Blex。这就像一个冠军。上帝保佑！