Home > Developer > Web Develop
In HTML5, there is a way to support cross-domain delivery postmessage, but to implement data transfer between the IFRAME!
The code is as follows: Data sending page
<!DOCTYPE HTML><HTMLLang= "en"><Head> <MetaCharSet= "Utf-8"/> <Metaname= "Copyright"content=""/> <Metaname= "keywords"content=""/> <Metaname= "description"content=""/> <title></title></Head><Body> <Divclass= "Color"> <inputtype= "text"value=""class= "GetColor"/> <inputtype= "button"ID= "button"value= "Send Color" /> </Div> <iframeID= "Child"src= "http://localhost/send/index.html"width= "The "Height= "+"></iframe></Body></HTML><Scripttype= "Text/javascript"src= "Js/jquery.min.js"></Script><Script> $(function(){ $("#button"). Click (function(){ varColor= $(". GetColor"). Val (). toString (); window.frames[0].postmessage (color,'http://localhost/send/index.html'); }); });</Script>
Data receive page
<!DOCTYPE HTML><HTMLLang= "en"><Head> <MetaCharSet= "Utf-8"/> <Metaname= "Copyright"content=""/> <Metaname= "keywords"content=""/> <Metaname= "description"content=""/> <title></title></Head><Body> <DivID= "Color"style= "width:400px;height:200px;"> </Div></Body></HTML><Scripttype= "Text/javascript"src= "Js/jquery.min.js"></Script><Script> $(function(){ varColor= $("#color"); Window.addeventlistener ('message',function(e) {varS_color=E.data; Color.css ('Background-color','#'+S_color); },false); });</Script>
When the sending page changes the color value, the embedded IFRAME page background color is directly modified, the effect is very good!
HTML5 cross-domain data transfer (postMessage)
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
