web-dev-qa-db-ja.com

クロスドメインiframeの問題

たとえば、iframeドメインiframe.netのiframeが埋め込まれたexample.comというサイトがある場合、iframeのコンテンツを読み取り、テキストメッセージを表示するためのパラメーターを渡したいと考えています。こんにちは、ユーザー名で。

今、問題はこれが2つを接続できないことであり、iframe iのinnerHTMLを取得することもできません

document.getElementById('myframe').contentWindow.document.body.innerHTML;

「プロパティへのアクセス許可が拒否されました」というエラーがスローされます

誰もがクロスドメインプラットフォームで読み書きする方法を知っていますか

javascriptjqueryhtmlhtml5mootools
41
Kunal Vashist

フレーム化されたサイトを制御できない場合、クロスドメインポリシーを回避することはできません。

両方のサイトを制御できる場合は、 postMessage メソッドを使用して、異なるドメイン間でデータを転送できます。非常に基本的な例：

// framed.htm:
window.onmessage = function(event) {
    event.source.postMessage(document.body.innerHTML, event.Origin);
};

// Main page:
window.onmessage = function(event) {
    alert(event.data);
};

// Trigger:
// <iframe id="myframe" src="framed.htm"></iframe>
document.getElementById('myframe').contentWindow.postMessage('','*');
52
Rob W

Internet Explorer 8では、パラメーターとして渡されるイベントはnullになる可能性があるため、別の方法でイベントにアクセスする必要があります。

frame.html：

window.onmessage = function(event) {
   var evt = event || window.event;
   evt.source.postMessage('Message from iFrame', evt.Origin);
};

オンmain.html：

window.onmessage = function(event) {
   var evt = event || window.event;
   alert(evt.data);
};

このイベントは、Rob Wが提示したのと同じ方法でトリガーされます。

document.getElementById('frameId').contentWindow.postMessage('message','*');
4
Przemek Marcinkiewicz

クロスドメインのiframe要素は、（srcDoc）でReactにアクセスします）：-

<iframe srcDoc={this.state.HTML}  width='100%' id='iframetnd' onLoad={this.onclickinsideiframe}/>


 onclickinsideiframe=()=>{
      if(document.getElementById('iframetnd')!==null){

                let iframe = document.getElementById('iframetnd');

                let innerDocument = (iframe.contentDocument)  
                                   ? iframe.contentDocument 
                                   : iframe.contentWindow.document;
                let Obj = innerDocument.getElementsByClassName("navButtons")[0];
                    if(Obj !== undefined){
                        Obj.onclick = ()=>this.func();
          }
       }
    }



  func=()=>{
           this.setState({page:2})
           this.arrangeTest();
        }
0
P L DHIMAN

iFrameでは、クロスドメインプラットフォームのコンテンツにアクセスできません。 iFrameが同じドメインを使用している場合にのみアクセスできます。

このソリューションは、iFrameと同じように機能します。他のWebサイトからすべてのコンテンツを取得できるPHPスクリプトを作成しました。最も重要な部分は、カスタムjQueryをその外部コンテンツに簡単に適用できることです。次のスクリプトを参照してください他のWebサイトからすべてのコンテンツを取得し、cusom jQuery/JSを同様に適用できます。このコンテンツは、どこでも、どの要素やページでも使用できます。

<div id='myframe'>

  <?php 
   /* 
    Use below function to display final HTML inside this div
   */

   //Display Frame
   echo displayFrame(); 
  ?>

</div>

<?php

/* 
  Function to display frame from another domain 
*/

function displayFrame()
{
  $webUrl = 'http://[external-web-domain.com]/';

  //Get HTML from the URL
  $content = file_get_contents($webUrl);

  //Add custom JS to returned HTML content
  $customJS = "
  <script>

      /* Here I am writing a sample jQuery to hide the navigation menu
         You can write your own jQuery for this content
      */
    //Hide Navigation bar
    jQuery(\".navbar.navbar-default\").hide();

  </script>";

  //Append Custom JS with HTML
  $html = $content . $customJS;

  //Return customized HTML
  return $html;
}
0
Ahsan Horani