web-dev-qa-db-ja.com

ウィンドウからiframeに値を渡す

Iframeに値を送信する必要があります。

Iframeは現在のウィンドウ内に存在します。どうすればこれを達成できますか？

Iframeを含む親ウィンドウでjavascriptを使用して行う必要があります。

javascripthtmliframe
49
praveenjayapal

最初に、フレームとコンテナ（フレームを含む）の2つのドキュメントがあることを理解する必要があります。

コンテナからフレームを操作する際の主な障害は、フレームが非同期にロードされることです。いつでも簡単にアクセスすることはできません。ロードが完了したことを知る必要があります。だから、トリックが必要です。通常の解決策は、フレームでwindow.parentを使用して「_」（iframeタグを含むドキュメントに）「アップ」することです。

これで、コンテナドキュメント内の任意のメソッドを呼び出すことができます。このメソッドはフレームを操作できます（たとえば、JavaScriptを呼び出すin必要なパラメーターでフレームを呼び出します）。メソッドを呼び出すタイミングを知るには、2つのオプションがあります。

  1. フレームのbody.onloadから呼び出します。

  2. 最後に、コンテナのメソッドを呼び出すフレームのHTMLコンテンツにスクリプト要素を追加します（読者のための演習として残しておきます）。

したがって、フレームは次のようになります。

<script>
function init() { window.parent.setUpFrame(); return true; }
function yourMethod(arg) { ... }
</script>
<body onload="init();">...</body>

そして、このようなコンテナ：

<script>
function setUpFrame() { 
    var frame = window.frames['frame-id'];
    frame.yourMethod('hello');
}
</script>
<body><iframe name="frame-id" src="..."></iframe></body>
63
Aaron Digulla

特定の状況に依存しますが、iframeをデプロイできる場合afterページの読み込みの残りの部分では、単純にクエリ文字列laを使用できます。

<iframe src="some_page.html?somedata=5&more=bacon"></iframe>

そして、some_page.htmlのどこかに：

<script>
var params = location.href.split('?')[1].split('&');
data = {};
for (x in params)
 {
data[params[x].split('=')[0]] = params[x].split('=')[1];
 }
</script>
53
Hexagon Theory

フレームが異なるドメインからのものである場合に使用できる別のソリューションがあります。

var frame = /*the iframe DOM object*/;
frame.contentWindow.postMessage({call:'sendValue', value: /*value*/}, /*frame domain url or '*'*/);

そして、フレーム自体で：

window.addEventListener('message', function(event) {
    var Origin = event.Origin || event.originalEvent.Origin; // For Chrome, the Origin property is in the event.originalEvent object.
    if (Origin !== /*the container's domain url*/)
        return;
    if (typeof event.data == 'object' && event.data.call=='sendValue') {
        // Do something with event.data.value;
    }
}, false);

ただし、これをサポートしているブラウザはわかりません。

31
Black Mantha

framesコレクション を使用します。

リンクから：

var frames = window.frames; // or // var frames = window.parent.frames;
for (var i = 0; i < frames.length; i++) { 
  // do something with each subframe as frames[i]
  frames[i].document.body.style.background = "red";
}

Iframeに名前がある場合は、次のことも実行できます。

window.frames['ponies'].number_of_ponies = 7;

これは、2つのページが同じドメインから提供されている場合にのみ実行できます。

13
wombleton

さらに2つのオプションは、最もエレガントではありませんが、おそらくiframeがその親から必要とするデータが複雑なオブジェクトではなく、ほんの数個の変数である場合に、おそらく簡単に理解および実装できます。

RLフラグメント識別子（＃）を使用

コンテナ内：

<iframe name="frame-id" src="http://url_to_iframe#dataToFrame"></iframe>

IFrameで：

<script>
var dataFromDocument = location.hash.replace(/#/, "");
alert(dataFromDocument); //alerts "dataToFrame"
</script>

iFrameの名前を使用

（私はこの解決策が好きではありません-name属性を悪用していますが、それはオプションなので、記録のために言及しています）

コンテナ内：

<iframe name="dataToFrame" src="http://url_to_iframe"></iframe>

IFrameで：

<script type="text/javascript">
alert(window.name); // alerts "dataToFrame"
</script>
11
Haji

メインウィンドウから基になるiframeにデータを送信するために「postMessage」コンセプトを使用できます。

このリンクを使用してpostMessageの詳細を確認できます メインウィンドウページ内に以下のコードを追加します

// main window code
window.frames['myFrame'].contentWindow.postMessage("Hello World!");

「Hello World！」を渡しますiframe id = "myFrame"のiframe contentWindowへのメッセージ。

iframeソースコード内に以下のコードを追加してください

// iframe document code
function receive(event) {
    console.log("Received Message : " + event.data);
}
window.addEventListener('message', receive);

iframe Webページでは、イベントリスナをアタッチしてイベントを受信し、「receive」コールバックでは、データをコンソールに出力します

0
Yashwanth Kumar

以下のリンクをご覧ください。Javascriptを使用すると、ページ内のiFrameのコンテンツを変更できる可能性がありますが、ブラウザ間のいくつかの問題が発生する可能性が最も高くなります。これを行うことができる場合は、ページ内のJavaScriptを使用して、iFrameが読み取れる値を含むiFrameに非表示のdom要素を追加できます。 iFrame内のドキュメントへのアクセス

0
Gcoop