第9章HTML5.pptVIP

【例9-1】 在网页中定义一个按钮，单击此按钮时，会检测浏览器是否支持跨文档消息机制。定义按钮的代码如下： button id=check onclick=check();检测浏览器是否支持跨文档消息机制/button 单击按钮check将调用check()函数。check()函数的定义代码如下： script type=text/javascript function check(){ if(typeof window.postMessage == undefined){ alert(您的浏览器不支持跨文档消息机制。); } else{ alert(您的浏览器支持跨文档消息机制。); } } /script 定义表单的代码 在a.html中定义了一个表单，其中包含一个文本框和一个提交按钮，用于编辑和提交数据，定义表单的代码如下： form pinput type=text required autofocus //p p class=mt10 input type=submit value=确认 / /p /form 定义提交动作的JavaScript代码 script var eleForm = document.querySelector(form); eleForm.onsubmit = function() { var message = document.querySelector(input[type=text]).value; window.parent.frames[1].postMessage(message, *); return false; } /script 右侧框架中显示的网页b.html中使用一个div标签显示接受到的信息 div id=message class=p20 尚未接受到信息。 /div 浏览【例9-2】的界面 9.1.3 监听和处理消息事件 在接收消息的窗口中，需要监听postMessage()方法发送的消息事件，并对其中包含的数据进行处理。如果使用addEventListener()方法指定事件的处理函数，则需要指定监听事件为message，方法如下： window.addEventListener(message, messageHandle, false); 如果使用attachEvent()方法指定事件的处理函数，则需要指定监听事件为onmessage，方法如下： window.attachEvent(onmessage, messageHandle); messageHandle是事件的处理函数，格式如下： var messageHandle = function(e) { … } 【例10-4】 html headscript type=text/javascript function count(){ var count // 读取localstorage数据，并转换为int类型 if(localStorage.getItem(count) == null) count =1 else count = parseInt(localStorage.getItem(count))+1; // 显示访问计数 if(count 1) document.write(您已是第 + count+次访问本站点了。); else document.write(欢迎您首次访问本站。); //保存新的访问计数 localStorage.setItem(count, count); } window.addEventListener(load, count, true); /script /head body /body /html 接上 var dataInput = document.getElementById(data), output = document.getElementById(fromEvent), save = document.getElementById(save); addEvent(window, storage, function (event) { if (event.key == storage-event-test) { output.innerHTML =key:+event.key+ ---- old:+event.oldValue+ ---- new:+ event.newValue; } });