Ionic3 при нажатии кнопки iframe.contentWindow.postMessage, необходимо прекратить обновлять URL / iframe при каждом нажатии - PullRequest
Новая
       10

Ionic3 при нажатии кнопки iframe.contentWindow.postMessage, необходимо прекратить обновлять URL / iframe при каждом нажатии

0 голосов
/ 17 января 2019

Я использую iframe в ionic 3 для передачи данных между родителем и ребенком.

при нажатии на кнопку я могу передать данные, используя iframe.contentWindow.postMessage ('value', '*')

но каждый раз при нажатии кнопки обновляется iframe.

Я делаю следующее:

Ионный 3 HTML-код / home.html 

<button ion-button id="message_button" (click)="sendMessage()">My iframe</button>

<iframe id="the_iframe" #iframe height="100%" width="100%" [src]="urlpaste()" name="iframe_a"></iframe>

Ionic 3 машинописный код / home.ts 

import { Component, ViewChild, ElementRef } from '@angular/core';
import { NavController } from 'ionic-angular';
import { DomSanitizer} from '@angular/platform-browser';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})

export class HomePage {

  @ViewChild('iframe') iframe: ElementRef;
  myIframe:any;

  constructor(public navCtrl: NavController, private sanitizer: DomSanitizer) {}

  urlpaste(){
    this.url = "http://localhost:5000/iframe.html";
    return this.sanitizer.bypassSecurityTrustResourceUrl(this.url);
  }

  ngAfterViewInit() {
    this.myIframe = this.iframe.nativeElement.contentWindow
  }

  sendMessage() {
    var random = Math.random();
    this.myIframe.postMessage(random, '*');
  }

}

Простой HTML-код / iframe.html 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>iframe Window</title>
    <style>
        body {
            background-color: #D53C2F;
            color: white;
        }
    </style>
</head>
<body>

    <h1>Hello there, i'm an iframe</h1>
    <p>Send Message: <button id="message_button">Hi parent</button></p>
    <p>Got Message:</p>
    <div id="results"></div>

    <script>
        // addEventListener support for IE8
        function bindEvent(element, eventName, eventHandler) {
            if (element.addEventListener) {
                element.addEventListener(eventName, eventHandler, false);
            } else if (element.attachEvent) {
                element.attachEvent('on' + eventName, eventHandler);
            }
        }

        // Send a message to the parent
        var sendMessage = function (msg) {
            // Make sure you are sending a string, and to stringify JSON
            window.parent.postMessage(msg, '*');
        };

        var results = document.getElementById('results'),
            messageButton = document.getElementById('message_button');

        // Listen to messages from parent window
        bindEvent(window, 'message', function (e) {
            results.innerHTML = e.data;
        });

        // Send random message data on every button click
        bindEvent(messageButton, 'click', function (e) {
            var random = Math.random();
            sendMessage('' + random);
        });
    </script>
</body>
</html>

1 Ответ

0 голосов
/ 04 мая 2019

Я знаю это немного поздно.Но это определенно поможет кому-то в будущем.

HTML 

<iframe id="the_iframe" #iframe height="100%" width="100%" [src]="url" name="iframe_a"></iframe>

TS 

    url = "";
    constructor(public navCtrl: NavController, private sanitizer: DomSanitizer) {
     this.url = this.urlpaste();
    }

  urlpaste(){
    let url = "http://localhost:5000/iframe.html";
    return this.sanitizer.bypassSecurityTrustResourceUrl(url);
  }

Вы должны использовать переменную url в iframe src.Не работайте прямо там ...

...