Как получить доступ к содержимому iframe с помощью jQuery?

116

Как я могу получить доступ к содержимому iframe с помощью jQuery? Я пробовал это сделать, но ничего не вышло:

содержимое iframe: <div id="myContent"></div>

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

Как я могу получить доступ myContent?

Подобно jquery / javascript: доступ к содержимому iframe, но принятый ответ - это не то, что я искал.

jquery iframe mbillard
источник
Я только что обнаружил, что встроенная переменная $ в консоли Firefox совсем не похожа на полный jQuery. (Я понял это после того, как понял, что у меня тоже нет переменной jQuery, а затем решил, что я не загружал исходный код jQuery).
eel ghEEz

Ответы:

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/

mbillard
источник
3
дайте мне ошибку: Ошибка: отказано в доступе к свойству ownerDocument
Имран Хан
26
ime: это, вероятно, дает вам ошибку по следующим причинам: 1) Iframe не принадлежит к тому же домену. 2) Вы пытаетесь прочитать его до события загрузки iframe.
iMatoria 05
1
Есть ли способ проверить, принадлежит ли содержимое iframe из того же домена, прежде чем пытаться получить к нему доступ и получить сообщение об ошибке?
Kamafeather 05
2
Исходный URL-адрес поврежден.
karthzDIGI
1
@jperezmartin: вам нужно будет использовать некоторую библиотеку javascript, которая будет передавать информацию между главной страницей и iframe. В основном это было отклонено браузером из-за функциональности Cross Browser. Извините, я не знаю ни одной такой библиотеки, потому что мне она никогда не требовалась.
iMatoria
21 
<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>
андрес дескальцо
источник
15

Если источником 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
источник