web-dev-qa-db-ja.com

コンテンツをiFrameに挿入する

「空白」のiFrameにコンテンツを挿入しようとしていますが、何も挿入されていません。

HTML：

<iframe id="iframe"></iframe>

JS：

$("#iframe").ready(function() {
    var $doc = $("#iframe").contentWindow.document;
    var $body = $("<body>").text("Test");
    $body.insertAfter($doc);
});

ready関数を呼び出しているため、挿入できない理由がわかりません。

javascriptjqueryhtmliframe
39
user2521439

そのためにjQueryは本当に必要ありません。

var doc = document.getElementById('iframe').contentWindow.document;
doc.open();
doc.write('Test');
doc.close();

jsFiddle Demo

JQueryを絶対に使用する必要がある場合は、 contents() を使用する必要があります。

var $iframe = $('#iframe');
$iframe.ready(function() {
    $iframe.contents().find("body").append('Test');
});

jsFiddle Demo

JQueryを使用している場合は、次のようにDOMReady関数にフックする必要があることを忘れないでください。

$(function() {  
    var $iframe = $('#iframe');
    $iframe.ready(function() {
        $iframe.contents().find("body").append('Test');
    });
});
92
BenM

これはあなたが望むことをするはずです：

$("#iframe").ready(function() {
    var body = $("#iframe").contents().find("body");
    body.append('Test');
});

これを確認してください JSFiddle デモ用です。

編集：もちろん、1行のスタイルで行うことができます：

$("#iframe").contents().find("body").append('Test');
4
Pavel Štěrba

CSSのWebページにあるすべてのIFrame thatsが必要な場合は、これを試してください。

var headClone, iFrameHead;

// Create a clone of the web-page head
headClone = $('head').clone();

// Find the head of the the iFrame we are looking for
iFrameHead = $('#iframe').contents().find('head');

// Replace 'iFrameHead with your Web page 'head'
iFrameHead.replaceWith(headClone);

// You should now have all the Web page CSS in the Iframe

幸運を。

2
Akash

（たとえば）divからiFrameにテキストを入力できます。

var $iframe = $('#iframe');
$iframe.ready(function() {
    $iframe.contents().find("body").append($('#mytext'));
});

およびdivs：

<iframe id="iframe"></iframe>
<div id="mytext">Hello!</div>

およびJSFiddleデモ： link

2
Marinha do Nascimento