如何使用jQuery访问iframe的内容？

116

如何使用jQuery访问iframe的内容？我尝试这样做，但是不起作用：

iframe内容： <div id="myContent"></div>

jQuery的： $("#myiframe").find("#myContent")

我该如何访问myContent？

与 jquery / javascript 类似：访问iframe的内容，但可接受的答案不是我想要的。

jquery iframe

— 姆比亚德
source

我只是发现Firefox控制台中的内置$变量根本看起来并不像完整的jQuery。（在意识到自己也没有jQuery变量，然后弄清楚自己没有加载jQuery的源代码后，才想到了这一点）。

— 鳗鱼ghEEz

Answers:

214

您必须使用以下contents()方法：

$("#myiframe").contents().find("#myContent")

来源：http：//simple.procoding.net/2008/03/21/how-to-access-iframe-in-jquery/

API文档：https：//api.jquery.com/contents/

— 姆比亚德
source

给我错误：错误：拒绝访问属性“ ownerDocument”的权限

— Imran Khan

ime：由于以下原因，它可能会给您带来错误：1）iframe不属于同一域。2）您正在尝试在iframe加载事件之前阅读它。

— iMatoria

在尝试访问iframe内容并出现错误之前，是否有方法可以验证iframe内容是否来自同一域？

— 卡马菲瑟

源网址已损坏。

— karthzDIGI

@jperezmartin：您将不得不使用一些javascript库，该库将在主页和iframe之间传输信息。基本上，由于跨浏览器功能，它被浏览器拒绝。很抱歉，我不知道任何此类库，因为我从不需要它。

— iMatoria

<html>
<head>
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>
<script type="text/javascript">

$(function() {

    //here you have the control over the body of the iframe document
    var iBody = $("#iView").contents().find("body");

    //here you have the control over any element (#myContent)
    var myContent = iBody.find("#myContent");

});

</script>
</head>
<body>
  <iframe src="mifile.html" id="iView" style="width:200px;height:70px;border:dotted 1px red" frameborder="0"></iframe>
</body>
</html>

— 安德烈斯·德斯卡佐
source

如果iframe的来源是外部域，则浏览器将隐藏iframe的内容（相同原始政策）。一种解决方法是将外部内容保存在文件中，例如（在PHP中）：

<?php
    $contents = file_get_contents($external_url);
    $res = file_put_contents($filename, $contents);
?>

然后，获取新文件的内容（字符串）并将其解析为html，例如（在jquery中）：

$.get(file_url, function(string){
    var html = $.parseHTML(string);
    var contents = $(html).contents();
},'html');

— fireb86
source