wake-up-neo.net

Domainübergreifendes Iframe-Problem

Zum Beispiel habe ich eine Site namens example.com, auf der iframe von Domäne iframe.net eingebettet ist. Jetzt möchte ich den Inhalt von iframe lesen und Parameter übergeben, um eine Textnachricht anzuzeigen. Wie Hallo mit Benutzername. 

Jetzt besteht das Problem darin, dass keine Verbindung zwischen den beiden hergestellt werden kann, selbst wenn ich nicht in der Lage bin, die innerHTML von iframe zu erhalten, die ich wie folgt verwendet habe

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

Es wird der Fehler "Zugriffsberechtigung für Zugriffseigenschaft verweigert" ausgegeben.

Weiß jemand, wie man auf einer domänenübergreifenden Plattform liest und schreibt

38
Kunal Vashist

Wenn Sie die gerahmte Site nicht steuern können, können Sie die domänenübergreifende Richtlinie nicht umgehen.

Wenn Sie die Kontrolle über beide Standorte haben, können Sie die Methode postMessage verwenden, um Daten zwischen verschiedenen Domänen zu übertragen. Ein sehr einfaches Beispiel:

// 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('','*');
51
Rob W

In Internet Explorer 8 können als Parameter übergebene Ereignisse null sein. Aus diesem Grund müssen Sie auf das Ereignis auf andere Weise zugreifen:

In frame.html :

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

Auf main.html :

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

Das Ereignis wird auf dieselbe Weise ausgelöst, wie Rob W es vorgestellt hat:

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

Zugriff auf domänenübergreifende iframe-Elemente in React with (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();
        }
0
P L DHIMAN

iFrame erlaubt keinen Zugriff auf Inhalte von der domänenübergreifenden Plattform aus. Sie können nur darauf zugreifen, wenn Ihr iFrame dieselbe Domäne verwendet.

Diese Lösung funktioniert genauso wie iFrame. Ich habe ein PHP -Skript erstellt, mit dem alle Inhalte von der anderen Website abgerufen werden können. Der wichtigste Teil ist, dass Sie Ihre benutzerdefinierte jQuery problemlos auf diesen externen Inhalt anwenden können. Bitte beachten Sie das folgende Skript, das alle Inhalte von der anderen Website abrufen kann. Anschließend können Sie auch Ihr jQuery/JS verwenden. Dieser Inhalt kann überall, innerhalb eines beliebigen Elements oder einer beliebigen Seite verwendet werden.

<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