web-dev-qa-db-ja.com

JavascriptまたはjQueryを使用して要素を子iframeに書き込む

私はこのようなものを持っています：

<html>
  <body>
     <iframe id="someFrame"></iframe>
  </body>
</html>

そして、jQueryを使用して、完全に同等のHTMLが次のようになるように要素を記述したいと思います。

<html>
  <body>
    <iframe id="someFrame">
      <!-- inside the iframe's content -->
      <!-- <html><body>  -->
      <div>A</div>
      <div>B</div>
      <div>C</div>
      <!-- </body></html> -->
    </iframe>
  </body>
</html>

あるいは、普通のJavascriptでも問題ありません。

ありがとう。

編集：もう少し調査した後、iframeのcontentDocumentプロパティに相当するIEを探しているようです。 "contentDocument"はFFがサポートするW3C標準ですが、IEはサポートしません。（驚き）

javascriptjqueryiframe
47
Jeff Meatball Yang

両方を行うことができます。ターゲットを変えるだけです。

var ifrm = document.getElementById('myIframe');
ifrm = ifrm.contentWindow || ifrm.contentDocument.document || ifrm.contentDocument;
ifrm.document.open();
ifrm.document.write('Hello World!');
ifrm.document.close();
84
Mike Robinson

いくつかの調査と、Mikeからの確証的な回答の後、これが解決策であることがわかりました。

  var d = $("#someFrame")[0].contentWindow.document; // contentWindow works in IE7 and FF
  d.open(); d.close(); // must open and close document object to start using it!

  // now start doing normal jQuery:
  $("body", d).append("<div>A</div><div>B</div><div>C</div>");
36
Jeff Meatball Yang

document内のiframe要素にアクセスするには、2つの信頼できる方法があります。

1. window.frames プロパティ：

var iframeDocument = window.frames['iframeName'].document; // or // var iframeDocument = window.frames[iframeIndex].document;

デモ （


2. contentDocument プロパティ：

var iframeDocument = document.getElementById('iframeID').contentDocument; // or // var iframeDocument = document.getElementById('iframeID').contentWindow.document;

デモ （

9
Mori

私はここで手足を外に出て、これまでに提案された答えが不可能であることを提案します。

このiframeが実際にsrc = "somepage.html"を持っている場合（これを示す必要がありますが、そうでない場合、iframeを使用するポイントは何ですか？）、Jqueryがすべてのブラウザーのフレーム間でhtmlを直接操作できるとは思いません。この種のことに関する私の経験に基づいて、包含ページは、iframeページから関数を直接呼び出したり、Javascriptに何らかの接触をしたりすることはできません。

「somepage.html」（iframeに読み込まれるページ）は、2つのことを行う必要があります。

  1. ブリッジとして使用できるページを含むページに何らかのオブジェクトを渡します
  2. 必要に応じてHTMLを設定する機能があります

たとえば、somepage.htmlは次のようになります。

<html>
<head>
<script src="jquery.js">
</script>
<script language=JavaScript>
<!--//
    var bridge={
        setHtml:function(htm) {
            document.body.innerHTML=htm;
        }
    }

    $(function() { parent.setBridge(bridge); });

//--></script>
</head>
<body></body>
</html>

含まれているページは次のようになります。

<html>
<head>
<script src="jquery.js">
</script>
<script language=JavaScript>
<!--//
var bridge;
var setBridge=function(br) {
    bridge=br;
    bridge.setHtml("<div>A</div><div>B</div><div>C</div>");
    }
//-->
</script>
</head>
<body><iframe src="somepage.html"></iframe></body>
</html>

これは少し複雑に見えるかもしれませんが、多くの方向に適応させることができ、少なくともIE、FF、Chrome、そしておそらくSafariとOperaで動作するはずです...

7
jwl

私はこれがクロスブラウザ互換であることがわかりました...以前の答えを少し越えて、私自身の少しの試行錯誤をしました。 :)

これをレポートのダウンロードに使用しています。エラー（メッセージ）が発生した場合は、iFrameに表示されます。ほとんどのユーザーは、おそらくiFrameを非表示にします。私は多機能を使用しています。

問題は、レポートのダウンロードボタンをクリックするたびにiFrameの内容をクリアする必要があることです。ユーザーはパラメーターを変更できますが、iFrameにメッセージとして表示される結果はありません。結果がareの場合、iFrameは空のままです-以下のコードがそれをクリアし、window.open(...)メソッドがContent-Disposition: attachment;filename=... 資料。

var $frm = $("#reportIFrame");
var $doc = $frm[0].contentWindow ? $frm[0].contentWindow.document : $frm[0].contentDocument;
var $body = $($doc.body);
$body.html(''); // clear iFrame contents <- I'm using this...
$body.append('<i>Writing into the iFrame...</i>'); // use this to write something into the iFrame
window.open(Module.PATH + 'php/getReport.php' + Report.queryData, 'reportIFrame');

contentDocumentをサポートするブラウザはありませんが、このようにコーディングしているので、そのままにします。誰かが古いブラウザを使用していて、互換性の確認/問題を投稿できますか？

0
damijank