Ionic 2中如何捕获<iframe>内部的点击事件？

Hey there, let's work through your two Ionic 2 iframe challenges together—scrollability and capturing internal clicks!

The most common culprit here is Ionic's default scroll behavior clashing with the iframe's native scroll, especially on mobile devices. Here are a few reliable fixes:

• Add scroll-friendly CSS to the iframe
  Ionic's viewport settings can restrict iframe scrolling. Add these styles to your iframe to enable smooth native scrolling:

  iframe {
    width: 100%;
    height: 100%;
    overflow: scroll;
    -webkit-overflow-scrolling: touch; /* Critical for smooth iOS scrolling */
    border: none;
  }
  

• Adjust your ion-content configuration
  If you're using ion-content to wrap the iframe, disable its built-in scroll interaction to let the iframe handle scrolling instead:

  <ion-content scroll="false">
    <iframe src="your-video-stream-url"></iframe>
  </ion-content>
  

  This prevents Ionic's scroll system from intercepting touch events meant for the iframe.

• Wrap in a scrollable container (for edge cases)
  If the above doesn't resolve the issue, wrap the iframe in a fixed-dimension div with scroll enabled:

  <div style="width: 100%; height: 400px; overflow: auto; -webkit-overflow-scrolling: touch;">
    <iframe src="your-video-stream-url" style="width: 100%; height: 100%; border: none;"></iframe>
  </div>
  

This depends entirely on the same-origin policy—whether the iframe's content is hosted on the same domain as your Ionic app.

Case 1: Same Domain (Content is from your app's domain) #

You can directly access the iframe's DOM and attach event listeners. In your Ionic page's TypeScript code:

import { Component, ViewChild, ElementRef } from '@angular/core';

@Component({
  selector: 'page-video',
  templateUrl: 'video.html'
})
export class VideoPage {
  @ViewChild('videoIframe') iframe: ElementRef;

  ngAfterViewInit() {
    const iframeDoc = this.iframe.nativeElement.contentDocument || this.iframe.nativeElement.contentWindow.document;
    
    // Listen for any click inside the iframe
    iframeDoc.addEventListener('click', (event) => {
      console.log('Iframe clicked! Target element:', event.target);
      // Add your custom logic here
    });
  }
}

And in your HTML template:

<iframe #videoIframe src="your-same-domain-video-url"></iframe>

Case 2: Cross Domain (Content is from an external domain) #

Same-origin policy blocks direct DOM access, so you'll need to use postMessage to communicate between the iframe and your Ionic app:

1. Inside the iframe's content (you need control over this external content to add this code):

// Triggered when a click happens in the iframe
document.addEventListener('click', () => {
  // Replace '*' with your Ionic app's exact domain for security
  window.parent.postMessage('iframe-clicked', 'https://your-ionic-app-domain.com');
});

2. In your Ionic page's TypeScript code:

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'page-video',
  templateUrl: 'video.html'
})
export class VideoPage implements OnInit {
  ngOnInit() {
    window.addEventListener('message', (event) => {
      // Verify the message comes from your trusted iframe domain
      if (event.origin === 'https://your-trusted-iframe-domain.com') {
        if (event.data === 'iframe-clicked') {
          console.log('Received click event from cross-domain iframe!');
          // Add your custom logic here
        }
      }
    });
  }
}

Always specify the exact origin instead of * to avoid security vulnerabilities.

内容的提问来源于stack exchange，提问作者Abraham Mathew