it-swarm.com.ru

Iframe без src, но все еще имеет контент?

Во время отладки кода jquery на их сайте (через панель инструментов разработчика Chrome)

Я заметил, что их примеры приведены под Iframe

Здесь - например есть образец, который находится под Iframe, но после исследования я вижу, что у Iframe нет SRC 

На картинке все это видно

enter image description here

Вопрос: 

Можно ли установить контент в Iframe, не устанавливая его SRC? 

постскриптум это меню также показывает мне пустой контент 

enter image description here

27
Royi Namir

Да, можно загрузить пустой <iframe> (без указания src), а затем применить к нему содержимое с помощью скрипта.

Смотрите: http://api.jquery.com/jquery-wp-content/themes/jquery/js/main.js (строка 54 и ниже).

Или просто попробуйте:

<iframe></iframe>

document.querySelector('iframe')[0]
        .contentDocument.write("<h1>Injected from parent frame</h1>")
34
haim770

Да, вот как вы можете изменить HTML-код iframe с помощью jQuery

var context = $('iframe')[0].contentWindow.document,
    $body = $('body', context);
$body.html('Cool');

Демо: http://jsfiddle.net/yBmBa/

document.contentWindow: https: //developer.mozilla.org/en-US/d ...

6
iConnor

Похоже, что это наиболее совместимое решение для всех браузеров, а также оно распознается W3C

<iframe src="about:blank"></iframe>
4
Oriol

Конечно. Вы можете получить ссылку на объект iframe's document с помощью

var doc = iframe.contentDocument;

а затем вы можете создавать и добавлять элементы, как вы делаете в текущем документе.

Если у iframe нет атрибута src, он все равно будет содержать пустой документ. Я полагаю, что хотя бы в более старых версиях IE требуется установить атрибут src, иначе у iframe не будет документа.

Смотрите также: contentDocument для iframe .

3
Felix Kling

Попробуйте дать:

src ="javascript:false;"
1
Aditya

Смешивая лучшие ответы в javascript и jQuery, я придумываю это решение для каждой iframe на странице:

<div class="iframewrapper ws-s-top mb-50" data-content="<!DOCTYPE html><html><head></head><body><p>Hello world</p></body></html>">
    <iframe frameborder="0" src=""></iframe>
</div>

$(".iframewrapper").each(function(){
    var html = $(this).attr("data-content");
    var iframe = $(this).find('iframe');
    var context = iframe[0].contentDocument.write(html);
    iframe[0].contentWindow.document.close(); //without this line, page loading animations won't go away!
});
0
Alex Jolig