HTML communication
cross-document message transmission
HTML5 provides the ability to receive and send information to and from a Web page document, using this function, as long as you get to an instance of the Window object where the page is located, not only can the pages of the same origin (domain + port) communicate with each other, or even cross domain communication. Message events involving the Api,window of two windows
| The code is as follows | Copy Code |
| Window.addeventlistener ("Message", function (EV) {...},false) Or Window.onmessage=function (EV) {...} |
|
Where the EV is a Messageevent object, several of its properties: data: Is the message content, TimeStamp: Timestamp, origin: Source URL address, Source: Sources Window object.
The other is the PostMessage method of the Window object:
| The code is as follows | Copy Code |
Otherwindow.postmessage (Data,targetorigin) |
|
Where data is the text of the message, Targetorigin is the URL address of the object window (such as "http://10.9.146.113:8026/"), and the wildcard character "*" can be used at the URL. A Otherwindow is a window object that can be an object returned by Windows.open, or a Window object that is owned by a single frame obtained by ordinal (index) or name specified by the Window.frames array.
Example: The main page is "http://10.9.146.113:8098/mytest/index.html" and communicates with the frame page "http://10.9.146.113:8026/index.html" that embeds it. The former HTML code:
| The code is as follows | Copy Code |
<!doctype html> <meta charset= "Utf-8" > <title> Test Local Cache </title> <body> <table> <TR><TD valign= "Top" > Http://10.9.146.113:8098/mytest/index.html<br> <textarea name= "msg" cols= "rows=" 5 "id=" msg "> Love me China, Love me China </textarea><br> <input type= "button" name= "button" id= "button" onclick= "sendmsg ()" value= "Send" > <div id= "Msginfo" > Received information:</div> </TD><TD valign= "Top" > <iframe style= "width:300px" height= "300px" src= "http://10.9.146.113:8026/index.html" ></iframe> </td> </table> </body> <script type= "Text/javascript" > function sendmsg () { var Msg=document.getelementbyid ("MSG"). Value; var iframe=window.frames[0]; Iframe.postmessage (msg, "http://10.9.146.113:8026/"); } You can also use the Listening method Window.onmessage=function (EV) { document.getElementById ("Msginfo"). innerhtml+= "<br>" +ev.data; }; </script> |
|
Latter
| The code is as follows | Copy Code |
<!doctype html> <meta charset= "Utf-8" > <title> Communication api</title> <body> Http://10.9.146.113:8026/index.html</p> <div id= "Msginfo" > Received information:</div> </body> <script type= "Text/javascript" > Window.addeventlistener ("Message", function (EV) { document.getElementById ("Msginfo"). innerhtml+= "<br>" +ev.data; Ev.source.postMessage ("have received", ev.origin); }); </script> |
|
Effect
WEB Socket Communication
Please refer to my another blog: http://www.oseye.net/user/kevin/blog/78, just do not have to encapsulate the server itself, now many Web server support WebSocket, such as IIS7, Tomcat, Apache , Resin, Nginx and so on.
Multithreading
Creating Threads
Add a Web workers API in HTML5 that allows you to implement multiple threads on a web platform, and you can run a lengthy processing to a background thread (called a worker in HTML5) to solve the HTML5 before it takes a long time to get out of a tip, The embarrassing situation that caused the user to end or close the browser.
Creating a background thread is very simple, just the URL address of the script piece that needs to be executed in the background running the thread in the Worker Class Builder is a parameter, and then the Worker object is created, as
| The code is as follows | Copy Code |
| var worker=new worker (' worker.js '); | |
Background threads do not have access to the page or window objects, and therefore require both foreground and background data to be transmitted, somewhat similar to the above document message transmission, received via the OnMessage event, sent through the PostMessage method.
Example: The background script is worker.js, and the code is as follows:
| The code is as follows | Copy Code |
Onmessage=function (EV) { var num=ev.data; var Res=1; for (Var i=0;i<10;i++) { Res*=num; } PostMessage (RES); } |
|
The front desk is a index.html page with the following code:
| The code is as follows | Copy Code |
| <! DOCTYPE html> <meta charset= "utf-8" <title> test Multithreading </title <body> <input type= "text" id= "num" value= "0" size= "5" > 10-time =< Span id= "res" >0</span> <br> <input type= "button" name= "button" id= "button" value= "calculation" Onclick= "Getres ()" </body> <script type= "Text/javascript" function Getres () { var worker=new worker (' worker.js '); var num=document.getelementbyid ("num"). Value //Send data to the background Worker.postmessage (num); //Time trigger Accept Data Worker.onmessage=function (EV) { document.getElementById ("res"). Innerhtml=ev.data } } </script> |
|
Effect
variables, functions, and classes that can be used in threads
Self: Represents a scope within this thread range;
PostMessage (message) to send messages to the source window where the thread is created;
OnMessage, gets the event handler function that receives the message;
Importscripts (URLs), import other JavaScript script files, the parameter is the URL address of the file, you can import more than one script file, the imported file must be in the same domain, the same port as the file that uses the thread, such as
| The code is as follows | Copy Code |
| Importscripts (' script1.js ', ' js/script2.js ') | |
Navigator object, similar to the Window.navigator object;
Sessionstorage/localstorage, you can use Web Storage in the thread;
XMLHttpRequest, you can handle Ajax in the thread;
WEB workers, you can nest threads in a thread;
SetTimeout ()/setinterval (), can be real-time processing in the thread;
Close (), ending this thread;
Eval (), isNaN (), Escape () can use the core functions of JS;
object, you can wear pieces and use local objects;
WebSockets, you can use the WebSocket API to send and receive messages to the server.
Terminate Web Worker
When we create a Web worker object, it continues to listen for messages (even after the external script completes) until it is terminated. To terminate web worker and free browser/computer resources, use the Terminate () method
| The code is as follows | Copy Code |
W.terminate (); |
|
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
