Last active
May 23, 2018 01:43
-
-
Save hiepxanh/566b26623dc8f99074aeba2ad8994208 to your computer and use it in GitHub Desktop.
iframe with postMessage
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!-- http://pbojinov.github.io/iframe-communication/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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <button ion-button color="secondary" (tap)="sendMessage()"> | |
| send message to iframe | |
| </button> | |
| <button ion-button color="secondary" (tap)="sendCookie()"> | |
| send sendCookie to iframe | |
| </button> | |
| <button ion-button color="secondary" (tap)="updateiframeSrc()"> | |
| updateiframeSrc | |
| </button> | |
| <iframe frameborder="0" #iframeCheckout [src]="iframeSrc"></iframe> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| iframeSrc:SafeHtml; | |
| cookie:string; | |
| @ViewChild('iframeCheckout') iframeCheckout: ElementRef; | |
| parentBindingListener() { | |
| console.log('we have the window',window); | |
| window.addEventListener( | |
| "message", | |
| (res) => { console.log("wow, message from post message",res)} | |
| , false | |
| ); | |
| } | |
| updateiframeSrc() { | |
| console.log('change iframe to',this.src) | |
| this.iframeSrc = this.domSanitizer.bypassSecurityTrustResourceUrl(this.src); | |
| } | |
| sendMessage() { | |
| this.iframeCheckout.nativeElement.contentWindow.postMessage(this.cookie, '*'); | |
| } | |
| sendCookie() { | |
| let cookies = this.auth.http.getCookieString(this.auth.endpoint); | |
| this.iframeCheckout.nativeElement.contentWindow.postMessage(this.str_obj(cookies), '*'); | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment