[JQUERY] 크로스 도메인 iframe이 문제

크로스 도메인 iframe이 문제

해결법

1. ---

   1.당신은 프레임이 사이트를 제어 할 수없는 경우에는 크로스 도메인 정책을 우회 할 수 없습니다.

   당신은 프레임이 사이트를 제어 할 수없는 경우에는 크로스 도메인 정책을 우회 할 수 없습니다.

   당신이 두 사이트를 제어 할 경우, 다른 도메인 간의 전송 데이터에 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('','*');
   

2. ---

   2.인터넷 익스플로러 8에서, 이벤트는 다른 방식으로 이벤트에 액세스해야하는 이유는 null이 될 수있는 매개 변수로 전달 :

   인터넷 익스플로러 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);
   };
   

   롭 W 제시 한대로 이벤트는 동일한 방식으로 실행됩니다 :

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

3. ---

   3.iframe에서 도메인 간 플랫폼에서 액세스 내용을 허용하지 않습니다. 당신의 iframe이 같은 도메인을 사용하는 경우에만 액세스 할 수 있습니다.

   iframe에서 도메인 간 플랫폼에서 액세스 내용을 허용하지 않습니다. 당신의 iframe이 같은 도메인을 사용하는 경우에만 액세스 할 수 있습니다.

   이 솔루션은 iframe이 같이 동일하게 작동합니다. 나는 다른 웹 사이트에서 모든 내용을 얻을 수있는 PHP 스크립트를 만들었습니다, 그리고 가장 중요한 부분은 쉽게 그 외부 콘텐츠에 사용자 정의 jQuery를 적용 할 수있다. 다른 웹 사이트의 모든 내용을 얻을 수 있습니다 그리고 당신은 당신의 맞춤 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;
   }
   

4. ---

   4.도메인 간은 iframe 요소에 액세스 (srcDoc)과 반응 -

   도메인 간은 iframe 요소에 액세스 (srcDoc)과 반응 -

   <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();
           }
   

5. ---

   5.당신이 두 사이트에 대한 제어 할 경우에만 일어날 수있다

   당신이 두 사이트에 대한 제어 할 경우에만 일어날 수있다

   당신은 PostMessage를 사용할 수 있습니다

   여기 당신이 그것을 적용 할 수있는 방법

   첫째, 당신은에서 데이터를 검색 할 사이트에 코드 아래를 추가 할 수 있습니다