0

フォームの横にウェブサイトを表示するためにiframeを使用しています。さまざまな入力フィールドの値に基づいて、そのiframe内の特定のコンテンツをライブで更新したいと思います。

これは私がやろうとしていることです(iframeの外で作業しています):http://jsfiddle.net/YkKUS/

textareaはiframeの外側にあり、更新されるコンテンツはiframeの内側にあります。

これが私のiframeで動作するように適合された私のコードです:

            $('.liveDemoFrame').load( function(){   // load the iframe          
                $(this.contentDocument).find('h1').html($('textarea').val());                   
                $('textarea').keyup(function() {
                    $(this.contentDocument).find('h1').html($(this).val()); // this line is screwing something up?!?
                });    
            });

5行目は私にいくつかの問題を引き起こしています。iframeは、実際にはテキストエリアのコンテンツで正常に更新されますが、ページを更新した場合に限ります。ライブでオンザフライで更新しているわけではありません。これが私がこれを行っている唯一の理由です。

ありがとう!

4

3 に答える 3

1

私はこれを親ページで行いましたが、うまくいったようです。

$(document).ready(function(){
    $('#textarea').bind('keyup', function() {
        var iframedoc = $('#iframe').get(0).contentDocument;
        $(iframedoc).find('h1').html($(this).val());
    });
});
于 2011-10-30T21:28:00.990 に答える
0

jQueryにいくつかのねじれがあるか、間違って実行している可能性があります。いずれにせよ、コードの半分をiframeで実際に実行するのが最も簡単な場合があります。次に、可能であれば、iframe.contentWindow.getHtml()またはiframe.contentWindow.setHtml()を呼び出すことができます。また、IIRC、contentDocumentも標準ではありませんでした。一部のブラウザでは、contentWindow.documentなどが必要です。

ただし、主な原因は次のとおりです。

$('.liveDemoFrame').load( function(){
    $(this.contentDocument).find('h1').html($('textarea').val());
    $('textarea').keyup(function() {
         // here this refers to textarea dom element, not iframe
         $(this.contentDocument).find('h1').html($(this).val()); 
    });    
});

修正は次のようになります

$('.liveDemoFrame').load( function(){
    var iframeDocument = $(this.contentDocument);
    iframeDocument.find('h1').html($('textarea').val());
    $('textarea').keyup(function() {
         // here this refers to textarea dom element, not iframe
         iframeDocument.find('h1').html($(this).val()); 
    });    
});
于 2011-10-30T20:18:30.270 に答える
-1

iframeの外側から何かを行うことはできません。これは、大規模なセキュリティホールになります。

于 2011-10-30T21:06:42.583 に答える