无法使用 jQuery 写入动态 iframe答案

【问题标题】：Can't write to dynamic iframe using jQuery无法使用 jQuery 写入动态 iframe
【发布时间】：2009-11-02 21:55:31
【问题描述】：

我的目标是动态创建一个 iframe 并使用 jQuery（例如 Google AdSense 脚本）将广告 JavaScript 写入其中。我的代码在 Chrome 上运行，但在 Firefox 中间歇性失败，即有时广告脚本会运行并呈现广告，有时则不会。当它不起作用时，脚本代码本身会显示在 iframe 中。

我的猜测是这些间歇性故障的发生是因为 iframe 在我写入时尚未准备好。我已经尝试了 iframe_html 的各种迭代（我应该等待 iframe 准备好的函数的名称），但没有运气。任何帮助表示赞赏！

PS：我已经阅读了各种帖子（例如jQuery .ready in a dynamically inserted iframe）。只是让大家知道我已经对此进行了研究，但我被困住了:)

迭代 1：

function iframe_html(html){
 $('<iframe name ="myiframe" id="myiframe"/>').appendTo('#maindiv');
 $('#myiframe').load(
   function(){
    $('#myiframe').ready( function(){
     var d = $("#myiframe")[0].contentWindow.document;
     d.open();
     d.close();
     d.write(html);
     });
   }
 );
};

迭代 2：

function iframe_html(html){
 $('<iframe id="myiframe"/>').appendTo('#maindiv').ready(
   function(){
    $("#myiframe").contents().get(0).write(html);
   }
 ); 
};

【问题讨论】：

尝试将 iframe 上的 src 设置为 about:blank？
你解决过这个问题吗？

标签： javascript jquery iframe

【解决方案1】：

老实说，我在处理 iframe 上的加载事件时发现的最简单和最可靠的方法是使用实际 iframe 标记中的“onload”属性。一旦“onload”事件触发，我在设置内容方面从来没有遇到过什么问题。这是一个例子：

<html>
    <head>
        <script type='text/javascript' src='jquery-1.3.2.js'></script>
        <script type='text/javascript'>
            $(function() {
                var $iframe = $("<iframe id='myiframe' name='myiframe' src='iframe.html' onload='iframe_load()'></iframe>");
                $("body").append($iframe);
            });
            function iframe_load() {
                var doc = $("#myiframe").contents()[0];
                $(doc.body).html("hi");
            }
        </script>
    </head>
    <body></body>
</html>

这样做的问题是您必须使用属性标签和全局函数声明。如果您绝对不能拥有这些东西之一，那么我对此没有任何问题（尽管它看起来与您的尝试没有太大不同，所以我不确定）：

<html>
    <head>
        <script type='text/javascript' src='jquery-1.3.2.js'></script>
        <script type='text/javascript'>
            $(function() {
                var $iframe = $("<iframe id='myiframe' name='myiframe' src='iframe.html'></iframe>");
                $iframe.load(iframe_load);
                $("body").append($iframe);
            });
            function iframe_load() {
                var doc = $("#myiframe").contents()[0];
                $(doc.body).html("hi");
            }
        </script>
    </head>
    <body></body>
</html>

这是 DOM 和 JavaScript 中最令人沮丧的部分之一 - 我对您表示哀悼。如果这些都不起作用，请打开 Firebug 并告诉我错误消息是什么。

【讨论】：

很酷的解决方案！！ +1，你能否添加一个函数来检测动态数据何时在$(doc.body).html("hi!") 之后在 iframe 中完成加载？

【解决方案2】：

假.html：

<html>
<head><title></title></head>
<body></body>
</html>

JS：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript">

function iframe_html(html)
{
 var id = "myiframe_" + ((new Date()).getTime());

 $('<iframe src="false.html" name ="'+id+'" id="'+id+'" />').appendTo('#maindiv');

 var loadIFrame = function()
 {
      var elIF = window.document.frames[id];
      if (elIF.window.document.readyState!="complete") 
      {
        setTimeout(loadIFrame, 100);
        return false;
      }

      $(elIF.window.document).find("body").html(html);
 }

  loadIFrame();


};
$(function(){

    iframe_html("<div>hola</div>");

}); 
</script>
</head>
<body>
<div id="maindiv"></div>
</body>
</html>

那么请看这个link

【讨论】：

那行不通。我遇到和之前一样的问题，就是广告脚本没有间歇性执行。
我修改了例子，看链接看window.document.frames[x]的兼容性。