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

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

Iframe 内容: <div id="myContent"></div>

JQuery: $("#myiframe").find("#myContent")

如何访问 myContent？

类似于 Jquery/javascript: 访问 iframe 的内容，但是公认的答案并不是我想要的。

331700 次浏览

小开

最佳答案

你必须使用 contents()方法:

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

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

API 文件: https://api.jquery.com/contents/

小开

<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>

小开

如果 iframe 的源是外部域，浏览器将隐藏 iframe 的内容(相同的起源策略)。一个解决方案是将外部内容保存在一个文件中，例如(在 PHP 中) :

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

then, get the new file content (string) and parse it to html, for example (in jquery):

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