web-dev-qa-db-fra.com

Iframe sans src mais a toujours du contenu?

Pendant le débogage du code jQuery sur leur site (via la barre d’outils développeur chrome)

J'ai remarqué que leurs exemples sont donnés sous Iframe

Ici - par exemple il y a un échantillon qui est sous un Iframe mais après enquête, je vois que l'Iframe n'a pas SRC 

La photo montre tout

enter image description here

Question: 

Est-il possible de définir le contenu sur un Iframe sans définir son code SRC? 

p.s. ce menu me montre aussi un contenu vide 

enter image description here

27
Royi Namir

Oui, il est possible de charger un <iframe> vide (sans que src soit spécifié) et de lui appliquer ultérieurement un contenu à l'aide d'un script.

Voir: http://api.jquery.com/jquery-wp-content/themes/jquery/js/main.js (lignes 54 et inférieures).

Ou essayez simplement:

<iframe></iframe>

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

Oui, voici comment vous modifiez le code HTML de l'iframe avec jQuery

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

Démo: http://jsfiddle.net/yBmBa/

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

6
iConnor

On dirait que c'est la solution la plus compatible sur tous les navigateurs et elle est également reconnue par le W3C

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

Sûr. Vous pouvez obtenir une référence à l’objet iframe de document avec

var doc = iframe.contentDocument;

vous pouvez ensuite créer et ajouter des éléments comme vous le faites dans le document actuel.

Si l'iframe n'a pas d'attribut src, il contiendra toujours un document vide. Je pense cependant qu'au moins les anciennes versions IE exigent que l'attribut src soit défini, sinon l'iframe n'aura pas de document.

Voir aussi: contentDocument pour un iframe .

3
Felix Kling

Essayez de donner:

src ="javascript:false;"
1
Aditya

En combinant les meilleures réponses en javascript et jQuery, je propose cette solution pour chaque iframe d'une page:

<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