2009-05-29 4 views
113
<iframe id="id_description_iframe" class="rte-zone" height="200" frameborder="0" title="description"> 
    <html> 
    <head></head> 
    <body class="frameBody"> 
     test<br/> 
    </body> 
    </html> 
</iframe> 

То, что я хочу, чтобы это:Как получить содержимое тела iframe в Javascript?

test<br/> 
+27

Важное примечание. Вы не можете получить доступ к содержимому iFrame, если это кросс-домен. См. [Политика одинакового происхождения] (http://en.wikipedia.org/wiki/Same-origin_policy). –

ответ

4

Я думаю, размещая текст между тегами зарезервирован для браузеров, которые не могут обрабатывать плавающие фреймы т.е. ..

<iframe src ="html_intro.asp" width="100%" height="300"> 
    <p>Your browser does not support iframes.</p> 
</iframe> 

Вы используете «SRC» атрибут для установки источника iframes html ...

Надеюсь, что поможет :)

+1

Некоторые современные браузеры показывают Iframe-Content-Html между тегами iframe в конкретной панели инструментов веб-разработчиков (например, WebInspector в Chrome). – algorhythm

1

Chalkey правильный, вам нужно использовать атрибут src, чтобы указать страницу, содержащуюся в iframe. Предоставление вам сделать это, и документ в IFRAME находится в том же домене, что и родительский документ, вы можете использовать это:

var e = document.getElementById("id_description_iframe"); 
if(e != null) { 
    alert(e.contentWindow.document.body.innerHTML); 
} 

Очевидно, что вы можете сделать что-то полезное с содержимым вместо того, чтобы просто положить их во оповещения.

+0

Это работает только в IE. Это вызывает ошибку в FF. – ichiban

+0

+1 Устранена проблема с автоматическим сохранением контроля telerik с помощью JS – Savaratkar

22

AFAIK, Iframe нельзя использовать таким образом. Вам нужно указать свой атрибут src на другую страницу.

Вот как получить содержимое своего тела с использованием старого старого javascript. Это работает как с IE, так и с Firefox.

function getFrameContents(){ 
    var iFrame = document.getElementById('id_description_iframe'); 
    var iFrameBody; 
    if (iFrame.contentDocument) 
    { // FF 
    iFrameBody = iFrame.contentDocument.getElementsByTagName('body')[0]; 
    } 
    else if (iFrame.contentWindow) 
    { // IE 
    iFrameBody = iFrame.contentWindow.document.getElementsByTagName('body')[0]; 
    } 
    alert(iFrameBody.innerHTML); 
} 
+7

Это не работает на хроме. – Kane

+1

он делает на сафари (т.е. филиал) –

63

Использование JQuery, попробуйте следующее:

$("#id_description_iframe").contents().find("body").html() 
+6

это не работает –

+22

Это не работает, потому что * «Домены, протоколы и порты должны совпадать». *: Небезопасный JavaScript пытается получить доступ к фрейму с URL-адресом –

+2

Как уже упоминалось, это сработает, если домены совпадают. FYI, я только что нашел, что $ ("# id_description_iframe #id_of_iframe_body"). Html() работает в Chrome, но не во всех версиях firefox, и, следовательно, использование вышеописанного в порядке. То есть $ ("# id_description_iframe #id_of_iframe_body"). contents(). find ("body"). html() действительно работал как в – hobailey

4

Следующий код является кросс-браузер, совместимый. Он работает в IE7, IE8, Fx 3, Safari и Chrome, поэтому нет необходимости обрабатывать проблемы с несколькими браузерами. Не тестировалось в IE6.

<iframe id="iframeId" name="iframeId">...</iframe> 

<script type="text/javascript"> 
    var iframeDoc; 
    if (window.frames && window.frames.iframeId && 
     (iframeDoc = window.frames.iframeId.document)) { 
     var iframeBody = iframeDoc.body; 
     var ifromContent = iframeBody.innerHTML; 
    } 
</script> 
+2

, он не работает в chrome – Codler

+0

Ниже приведенный html работал для меня в Chrome 7 на Mac. Я протестировал этот оригинальный пост в Chrome 6 на Windows, и он отлично работал. <тип скрипта = "текст/JavaScript"> вар iframeDoc; , если (window.frames && && window.frames.iframeId window.frames.iframeId.document) { window.frames.iframeId.document.body.innerHTML = "

испытаний"; } – nekno

+1

'window.frames.iframeId.document' неопределен для меня. (Ubuntu 13.04, Chrome) –

9

использование content в IFRAME с JS:

document.getElementById('id_iframe').contentWindow.document.write('content'); 
20

она прекрасно работает для меня:

document.getElementById('iframe_id').contentWindow.document.body.innerHTML; 
+0

Странно, но для меня '.body' не работает. Однако '.getElementsByTagName ('body') [0]' делает. –

111

Точный вопрос заключается в том, чтобы сделать его чистым JavaScript не с JQuery.

Я всегда использую решение, которое можно найти в исходном коде jQuery. Это всего лишь одна строка и чистый JavaScript.

Для меня это лучший и даже самый короткий способ получить содержимое iframes.

Сначала получить IFRAME:

var iframe = document.getElementById('id_description_iframe'); 

// or 
var iframe = document.querySelector('#id_description_iframe'); 

И затем использовать решение JQuery в:

var iframeDocument = iframe.contentDocument || iframe.contentWindow.document; 

Он работает даже в Internet Explorer, который делает этот трюк во время contentWindow имущества iframe объекта , Большинство других браузеров используют свойство contentDocument, и именно по этой причине мы сначала подтверждаем это свойство в этом состоянии ИЛИ.Если он не установлен, попробуйте contentWindow.document.

И тогда обычно вы можете использовать getElementById() или даже querySelectorAll() выбрать DOM-элемент из iframeDocument:

var iframeContent; 

if (iframeDocument) { 
    iframeContent = iframeDocument.getElementById('frameBody'); 

    // or 
    iframeContent = iframeDocument.querySelectorAll('#frameBody'); 
} 

функции вызова в IFRAME

Получить только window элемент из iframe для вызова некоторых глобальных функций, переменных или целых библиотек (например, jQuery):

var iframeWindow = iframe.contentWindow; 

if (iframeWindow) { 
    // you can even call jQuery or other frameworks if it is loaded inside the iframe 
    iframeContent = iframeWindow.jQuery('#frameBody'); 

    // or 
    iframeContent = iframeWindow.$('#frameBody'); 

    // or even use any other global variable 
    iframeWindow.inside_iframe_variable = window.outside_iframe_variable; 

    // or call a global function 
    var myReturnValue = iframeWindow.globalFunction(withParam); 
} 

Примечание

Все это возможно, если вы будете наблюдать за same-origin policy.

+2

iframe здесь undefined, либо вы должны написать полный код, либо не должны писать jQuery с ним –

+11

, пожалуйста, извините меня, но строка кода является выдержкой из кода jquery, а блок кода - моим собственным примером кода. Остальное должно выйти из себя. единственное, чего вам не хватает, это переменная iframe. И я не могу знать, где находится ваш iframe или как его идентификатор. – algorhythm

+0

Теперь его более понятно .. Спасибо за редактирование. –

Смежные вопросы