2

我尝试访问由 jquery colorbox 插件生成的 iframe 的内容几个小时都没有成功。

这是我的代码：

    $(".ListView li a").colorbox({ 

iframe:true,
width: "50%",
height: "50%",
opacity: 0.5,
onComplete: function() { 
alert("complete");
$("iframe").contents().find("p").css("color","#f00");   
}
});

它加载一个文件并显示它。如此精细。当 iframe 加载完成时，也会抛出警报消息。但我无法通过 jquery 选择器访问框架内的元素。iframe 内的所有 p 元素都没有发生任何事情。

两者都不

    if($("iframe").contents().length > 0)
{
alert("exists");    
}

也不

    if($("iframe").length > 0)
{
alert("exists");    
}

是成功的。页面上没有其他iframe，我也尝试插入类名。

对于直接插入 html 而不是由颜色框生成的“普通”iframe，我的功能正在运行。

谢谢

生成的代码：

<div id="colorbox" class="" style="display: block; padding-bottom: 50px; padding-right: 50px;    top: 128px; left: 476px; position: absolute; width: 902px; height: 207px;">
<div id="cboxWrapper" style="height: 257px; width: 952px;">
<div>
<div style="clear: left;">
<div id="cboxMiddleLeft" style="float: left; height: 207px;"></div>
<div id="cboxContent" style="float: left; width: 902px; height: 207px;">
<div id="cboxLoadedContent" style="display: block; width: 902px; overflow: auto; height: 187px;">
<iframe class="cboxIframe" frameborder="0" name="cbox1334265249803" src="qtest.html">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<body>
<a href="#">Link</a>
<p>Formatted Text</p>
</body>
</html>
</iframe>
</div>
<div id="cboxLoadingOverlay" style="float: left; display: none;"></div>
<div id="cboxLoadingGraphic" style="float: left; display: none;"></div>
<div id="cboxTitle" style="float: left; display: block;"></div>
<div id="cboxCurrent" style="float: left; display: none;"></div>
<div id="cboxNext" style="float: left; display: none;"></div>
<div id="cboxPrevious" style="float: left; display: none;"></div>
<div id="cboxSlideshow" style="float: left; display: none;"></div>
<div id="cboxClose" style="float: left;">close</div>
</div>
<div id="cboxMiddleRight" style="float: left; height: 207px;"></div>
</div>
<div style="clear: left;">
</div>
<div style="position: absolute; width: 9999px; visibility: hidden; display: none;"></div>
</div>
<div class="ui-dialog ui-widget ui-widget-content ui-corner-all ui-draggable" style="display: none; z-index: 1000; outline: 0px none;" tabindex="-1" role="dialog" aria-labelledby="ui-dialog-title-box-trash-dialog">
4

2 回答 2

3

使用 iframe，一旦 iframe 元素添加到文档中，onComplete 实际上就会触发。如果要查询内容，则必须等到 DOM 准备好。父文档无法知道 iframe 的 DOM 何时准备就绪，它只能监听窗口的 onload 事件。

但是，您可以通过将 fastIframe 属性设置为 false 来告诉 colorbox 等待并在 iframe 的 onload 事件触发后触发 onComplete 函数。例子：

$('a.example').colorbox({iframe:true, fastIframe:false, width:500, height:500})

当然，这一切都假设 iframe 来自与父级相同的域，并且没有安全限制阻止您访问 iframe 的内容。

于 2012-04-14T02:24:55.440 回答
0

有一个访问 iframe 内容的 corss-browser 解决方案，您可以在此处阅读。

此外，您可以使用 jquery 访问 iFrame 的内容，在此处阅读更多内容。

两种解决方案都通过 ID 找到您的 iframe，因此您需要一个 id 才能使用这些解决方案。我希望这有帮助。

于 2012-04-12T15:57:45.477 回答