2016-07-06 15 views
0

私は私はsrcが、下記の別のドメインである場合はiframeのコンテンツを取得する必要がある要件が私のコードのPostMessage読むのiframeコンテンツ

<iframe id="receiver" src="http://demos.mattwest.io/post-message/receiver.html" width="500" height="200"> 
    <p>Your browser does not support iframes.</p> 
</iframe> 



<script> 
setTimeout(function(){ 
console.log($('#receiver').contents().find('body')); 
}, 2000); 

である私は、エラー

jquery-2.2.4.js:3079 Uncaught SecurityError: Failed to read the 'contentDocument' property from 'HTMLIFrameElement': Blocked a frame with origin "null" from accessing a frame with origin "http://demos.mattwest.io". The frame requesting access has a protocol of "file", the frame being accessed has a protocol of "http". Protocols must match. 

を以下の持っている私は多くのことを検索PostMessageについて見つけましたhttp://blog.teamtreehouse.com/cross-domain-messaging-with-postmessage

ここで彼らはメッセージを送信しています。私の目標はiframeコンテンツを取得することです。どのように私のscenearioでpostMessageを実装できますか?私はフィドルを作成することができカント

、そのは、他のいくつかの問題、これは助けてください解決する方法

https://jsfiddle.net/alokranjan39/re6aja0c/を示す!!!

答えて

2

postMessageiframeはローカルでは機能しません。 このコードをサーバで実行するか、またはhttpで始まらないテストウェブサイトがfileである必要があります。

それ以外の場合はiframeと通信するにはのpostMessage()メソッドを使用するため、jQueryを避けてください。

ピュアJavaScriptの道:

使用.contentDocument

var iframer = document.getElementById('reciever'); 

var iframeBody = iframer.contentDocument.body; 

ユースケース:

iframer.contentDocument.getElementById('someElementInIframe') 

電気ショック療法...

・ホープこのヘルプ

+0

まだ同じエラーが出ていますwamp www folder.ifにコードを入れます。私は自分のコードをサーバーに入れます。これはpostmessageを実装して同じ結果を受け取るステップです – user3106347

関連する問題