You can see the above code in action at my postMessage demo, which is part of a new testing ground on my web site, HTML5 – Information and samples for HTML5 and related APIs which displays various HTML5 examples, the code to run them and web browser compatibility.Menus Icon Bar Menu Icon Accordion Tabs Vertical Tabs Tab Headers Full Page Tabs Hover Tabs Top Navigation Responsive Topnav Split Navigation Navbar with Icons Search Menu Search Bar Fixed Sidebar Side Navigation Responsive Sidebar Fullscreen Navigation Off-Canvas Menu Hover Sidenav Buttons Sidebar with Icons Horizontal Scroll Menu Vertical Menu Bottom Navigation Responsive Bottom Nav Bottom Border Nav Links Right Aligned Menu Links Centered Menu Link Equal Width Menu Links Fixed Menu Slide Down Bar on Scroll Hide Navbar on Scroll Shrink Navbar on Scroll Sticky Navbar Navbar on Image Hover Dropdowns Click Dropdowns Cascading Dropdown Dropdown in Topnav Dropdown in Sidenav Resp Navbar Dropdown Subnavigation Menu Dropup Mega Menu Mobile Menu Curtain Menu Collapsed Sidebar Collapsed Sidepanel Pagination Breadcrumbs Button Group Vertical Button Group Sticky Social Bar Pill Navigation Responsive Header The nice thing is that this is supported in: Window.attachEvent("onmessage", displayMessage) Window.addEventListener("message", displayMessage, false) Message = "I got " + evt.data + " from " + evt.origin ĭocument.getElementById("received-message").innerHTML = message IframeWin.postMessage(myMessage.value, "") MyMessage = document.getElementById("my-message") Var iframeWin = document.getElementById("da-iframe").contentWindow,įorm = document.getElementById("the-form"), In this example we will have one containing page with a form, posting a message to an iframe in that page. Optional: add an origin check for security reasons.In the receiving window, just add an event listener for the message event.Call the postMessage method of the window/iframe element you want to send the information to.What makes it cool, and very easy to use, is that all you need to trigger it is to call a method and add an event handler: The solution is called postMessage and is part of the HTML5 Web Messaging specification. PostMessage in HTML5 to send messages between windows and iframes Published on Thursday, March 18, 2010Įver had the need to communicate between windows or the current window and an inner iframe? Across domains as well? I bet you have, but now we have a nice option for doing that!
0 Comments
Leave a Reply. |