Wie trigger übergeordnete Funktion Fenster aus iframe a>href Klick, ionic2/angular2

Derzeit arbeite ich an ionic2 app.

In einer Ionischen Seite habe ich eingebettet in einem Iframe

<iframe id="iframeId" #iframe src="./epubpages/s006-Lesson-001.xhtml" width="100%" height="100%" (load)="onLoad()"></iframe>

innerhalb dieser Seite .ts-Datei

@ViewChild('iframe') iframe:ElementRef;
onLoad()  {
console.log('me');

let doc =  this.iframe.nativeElement.contentDocument || this.iframe.nativeElement.contentWindow;
var h = doc.getElementsByTagName('a');
console.log(this.iframe.nativeElement.contentDocument.document);
for(let i=0; i<h.length; i++){
  h[i].onclick = function(){
    window.parent['sayHello'];
  }
}}
sayHello(){
    console.log("Saying Hello from ");
}

Wenn ich auf der IFRAME-Seite verlinken, die funciton SayHello (), die sich auf der übergeordneten Seite wird nicht immer genannt. Ich weiß nicht, ob es möglich ist oder nicht, aber das ist meine Anforderung für das auslösen der übergeordneten Seite Funktion.

Ich bin mit ionic2.

  • Haben Sie erkannt? Ich bin jetzt mit dem gleichen problem
InformationsquelleAutor raju | 2016-08-17



One Reply
  1. 0

    Ich kam gerade über diese auf github was helfen kann. Grundsätzlich Aussehen für ein Fenster.blur-Ereignis und verwenden Sie diese. Hier ist der code aus github:

    var myConfObj = {
       iframeMouseOver : false
    }
    window.addEventListener('blur',function(){
      if(myConfObj.iframeMouseOver){
        console.log('Wow! Iframe Click!');
      }
    });
    
    document.getElementById('YOUR_CONTAINER_ID').addEventListener('mouseover',function(){
       myConfObj.iframeMouseOver = true;
    });
    document.getElementById('YOUR_CONTAINER_ID').addEventListener('mouseout',function(){
       myConfObj.iframeMouseOver = false;
    });
    

    Ich lief in ein ähnliches Problem in einem Angular2 app und verwendet das folgende (bei anderen Angular2 Benutzer in diesem Thema):

    @Component({
      selector: 'my-selector',
      host: {
        '(window:blur)': 'myHandler($event)',
        '(window:click)': 'myHandler($event)'
      },
      ...
    })
    ... //rest of the component
    

    Addition der beiden '(window:blur)' und '(window:click)' hilft, Fälle zu behandeln, wo der Benutzer klickt an anderer Stelle in dem Fenster, das nicht Teil der iframe.

    Ich hoffe, das hilft!

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.