web-dev-qa-db-ja.com

HTMLをiframeに挿入します

ブラウザでHTMLエディタを作成しています。私はコードミラーと呼ばれるシンタックスハイライトを使用しています。これは非常に優れています。

私のセットアップは、編集中のページのビューと、ユーザーが編集するプレーンテキストのHTMLが配置されているテキスト領域を保持するiframeです。

編集したHTMLをテキストエリアからレンダリングされたHTMLを表示するiframeに挿入しようとしています。

これは可能ですか？私は以下を試しました：

HTMLの設定：

<iframe id="render">

</iframe>

<textarea id="code">
HTML WILL BE 

HERE
</textarea>
<input type="submit" id="edit_button" value="Edit" />

JQueryのセットアップ：

$('#edit_button').click(function(){
    var code = editor.getCode(); // editor.getCode() is a codemirror function which gets the HTML from the text area
    var iframe = $('#render');
    iframe.html(code)
})

これはHTMLをiframeにロードしていないようですが、HTMLをiframeに挿入する特別な方法はありますか、それとも不可能ですか？

乾杯

イーフ

jqueryhtmliframeinsert
18
RailsSon

この問題も私を悩ませ、ついに解決策を見つけました。

遅いですが、適切な修正が必要な他の訪問者に付加価値を提供します。

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="en">
<head>
    <title>Iframe test</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js">
    </script>
    <script type="text/javascript">
        $(function() {
            var $frame = $('<iframe style="width:200px; height:100px;">');
            $('body').html( $frame );
            setTimeout( function() {
                var doc = $frame[0].contentWindow.document;
                var $body = $('body',doc);
                $body.html('<h1>Test</h1>');
            }, 1 );
        });
    </script>
</head>
<body>
</body>
</html>
28
OpenCode

Jqueryを使用すると、すべてを1行で実行できます

$("iframe").contents().find('html').html("Your new HTML");

ここで作業デモを参照してください http://jsfiddle.net/dWpvf/972/

例として、「iframe」を「#render」に置き換えます。他のユーザーが答えを参照できるように、「iframe」のままにしました。

11
Justin Levene

試してみてください

iframe[0].documentElement.innerHTML = code;

IframeへのURLがWebページと同じドメインからのものであると仮定します。

2
Marius