The main difference between the two pages is the method of sending messages. Recieving messages is the same in both.
Send messages to iframe using iframeEl.contentWindow.postMessage
Recieve messages using window.addEventListener('message')
Canu Fabien cladjidane
This file contains hidden or 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
| <link rel="import" href="../topeka-elements/topeka-datasource.html"> | |
| <link rel="import" href="../notification-elements/notification-alert.html"> | |
| <link rel="import" href="../core-icon-button/core-icon-button.html"> | |
| <link rel="import" href="../core-toolbar/core-toolbar.html"> | |
| <link rel="import" href="../core-scroll-header-panel/core-scroll-header-panel.html"> | |
| <polymer-element name="my-element"> | |
| <template> | |
| <style> |
This file contains hidden or 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
| <link rel="import" href="../core-scaffold/core-scaffold.html"> | |
| <link rel="import" href="../core-header-panel/core-header-panel.html"> | |
| <link rel="import" href="../core-menu/core-menu.html"> | |
| <link rel="import" href="../core-item/core-item.html"> | |
| <link rel="import" href="../core-icon-button/core-icon-button.html"> | |
| <link rel="import" href="../core-toolbar/core-toolbar.html"> | |
| <link rel="import" href="../core-menu/core-submenu.html"> | |
| <link rel="import" href="../core-pages/core-pages.html"> | |
| <polymer-element name="my-element"> |
This file contains hidden or 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
| <link rel="import" href="../core-drawer-panel/core-drawer-panel.html"> | |
| <link rel="import" href="../core-menu/core-submenu.html"> | |
| <link rel="import" href="../core-item/core-item.html"> | |
| <link rel="import" href="../core-icon-button/core-icon-button.html"> | |
| <link rel="import" href="../core-pages/core-pages.html"> | |
| <polymer-element name="my-element"> | |
| <template> | |
| <style> |
This file contains hidden or 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
| <link rel="import" href="../polymer/polymer.html"> | |
| <polymer-element name="my-element"> | |
| <template> | |
| <style> | |
| :host { | |
| position: absolute; | |
| width: 100%; | |
| height: 100%; |
This file contains hidden or 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
| <link rel="import" href="../core-drawer-panel/core-drawer-panel.html"> | |
| <link rel="import" href="../core-menu/core-submenu.html"> | |
| <link rel="import" href="../core-item/core-item.html"> | |
| <link rel="import" href="../core-icon-button/core-icon-button.html"> | |
| <link rel="import" href="../core-toolbar/core-toolbar.html"> | |
| <link rel="import" href="../core-pages/core-pages.html"> | |
| <polymer-element name="my-element"> | |
| <template> |
cladjidane
/ iframe.html
Created
July 27, 2018 06:24
— forked from cirocosta/iframe.html
Sending messages from child iframe to parent webpage
This file contains hidden or 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
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>My Iframe</title> | |
| </head> | |
| <body> | |
| <button>Botão</button> | |
| <script type="text/javascript"> |
cladjidane
/ README.md
Created
July 27, 2018 07:52
— forked from pbojinov/README.md
Two way iframe communication- Check out working example here: http://pbojinov.github.io/iframe-communication/
cladjidane
/ ComponentIndex.js
Created
August 5, 2018 14:07
— forked from davidgljay/ComponentIndex.js
Pattern for dynamically loading React components based on a config json object.
This file contains hidden or 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
| import config from '../config' | |
| let components = {} | |
| //For each component in the config fiel into an object | |
| for (var i = config.length - 1; i >= 0; i--) { | |
| components[config[i].name] = require(config[i].path).default | |
| } | |
| export default components |
This file contains hidden or 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
| window.et_pb_smooth_scroll = function( $target, $top_section, speed, easing ) { | |
| var $window_width = $( window ).width(); | |
| $menu_offset = -1; | |
| if ( $ ('#wpadminbar').length && $window_width > 600 ) { | |
| $menu_offset += $( '#wpadminbar' ).outerHeight(); | |
| } | |
| //fix sidenav scroll to top |
This file contains hidden or 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
| /** | |
| * Snap point (coords param) to roads | |
| * The roads depend on the style of the map | |
| * @param {Object Mapbox} map | |
| * @param {Object feature.geometry.coordinates} coords | |
| */ | |
| const snapToRoad = (map, coords) => { | |
| // Coordinate to point conversion | |
| let currentPoint = turf.point([coords.lng, coords.lat]); | |
| // Here we're only retrieving the road layers |
OlderNewer