这篇文章主要介绍了嵌入式iframe子页面与父页面js通信的方法,实例分析了嵌入式iframe子页面与父页面js通信的常用技巧,非常具有实用价值,需要的朋友可以参考下本文实例讲述了嵌入式iframe子页面与父页面js通信的方法。分享给大家供大家参考。具体分析如下：
iframe框架中的页面与主页面之间的通信方式根据iframe中src属性是同域链接还是跨域链接，有明显不同的通信方式，同域下的数据交换和DOM元素互访就简单的多了，而跨域的则需要一些巧妙的方式来实现通信。
一、同域下父子页面的通信
父页面parent.html：
代码如下:
<html>
<head>
<script type="text/javascript">
function say() {
alert("parent.html------>I'm at parent.html");
}
function callChild()
{
//document.frames["myFrame"].window.say();//只适用于ie浏览器
myFrame.window.say();
myFrame.window.document.getElementById("button").value="我变了";
}
</script>
</head>
<body>
<input type=button value="调用child.html中的函数say()" onclick="callChild()">
<iframe name="myFrame" src="child.html"></iframe>
</body>
</html>
子页面child.html：
代码如下:
<html>
<head>
<script type="text/javascript">
function say()
{
alert("child.html--->I'm at child.html");
}
function callParent() {
parent.say();
parent.window.document.getElementsByName("myFrame")[0].style.height="100px";
}
</script>
</head>
<body>
<input id="button" type=button value="调用parent.html中的say()函数" onclick="callParent()">
</body>
</html>
方法调用
如上面示例所示父页面调用子页面的方法可通过：FrameName.window.childMethod();(这种方式兼容各种浏览器)
子页面调用父页面的方法：parent.window.parentMethod();
DOM元素访问
根据FrameName.window得到了子窗口对象之后，再访问其中的DOM元素就跟访问同一页面中的DOM元素没区别了都可以通过
代码如下:
document.getElementById(),document.getElementsByName()[index]
如：
代码如下:
parent.window.document.getElementsByName("myFrame")[0];
myFrame.window.document.getElementById("button")
其中的window都是可以省略的。
注意事项
要确保在Iframe加载完成后再进行操作，如果Iframe还未加载完成就开始调用里面的方法或变量，无疑会产生错误。判断Iframe是否加载完毕有两种方法：
1.在Iframe上用onload事件;
2.用document.readyState=="complete"来判断
二、跨域父子页面通信方法
如果iframe所链接的是外部页面，因为安全机制则不能使用同域名下的通信方式了。
父页面向子页面传递数据
实现的技巧就是利用location 对象的hash 值，通过它传递通信数据，我们只需要在父页面设置iframe的src 后面多加个#data 字符串（data就是你要传递的数据），然后在子页面中通过某种方式能即时的获取到这儿data 就可以了，其实常用的一种方式就是：
1. 在子页面中通过setInterval 方法设置定时器，监听location.href 的变化即可获得上面的data 信息
2. 然后子页面就能根据这个data 信息进行相应的逻辑处理。
子页面向父页面传递数据
实现的技巧就是利用一个代理Iframe C，它嵌入到子页面中，并且和父页面必须保持是同域，然后我们通过它充分利用上面第一种通信方式的实现原理就能把子页面的数据传递给iframeC，接下来的问题就是怎么让iframeC把数据传递给主页面A ，因为，iframeC 和主页面是同域的，所以它们之间传递数据就变得简单多了，属于同域名下的通信问题了，如前面所讨论的，在这里的可以使用一个经常使用的属性window.top (也可以使用window.parent.parent)，它返回对载入浏览器得最顶层window 对象的引用，这样我们就能直接条用父页面中方法啦。
希望本文所述对大家的javascript程序设计有所帮助。更多信息请查看IT技术专栏
1. Javascript 返回上一页 history.go(-1), 返回两个页面: history.go(-2); 2. history.back(). 3. window.history.forward()返回下一页 4. window.history.go(返回第几页,也可以使用访问过的URL) 例: 向上一页 response.Write("") response.Write("") 向上一页 页面跳转:onclick="window.location.href='list.aspx'" P.S. 小技巧(JS引用JS): Javascript刷新页面的几种方法： 1 history.go(0) 2 location.reload() 3 location=location 4 location.assign(location) 5 document.execCommand('Refresh') 6 window.navigate(location) 7 location.replace(location) 8 document.URL=location.href 自动刷新页面的方法: 1.页面自动刷新：把如下代码加入
区域中 其中20指每隔20秒刷新一次页面.经常上网的朋友可能到过这样一些网站，一进入首页立刻会弹出一个窗口，或者按一个链接或按钮弹出，通常在这个窗口里会显示一些注意事项、版权信息、警告、欢迎光顾之类的话或者作者想要特别提示的信息。其实制作这样的页面非常容易，只要往该页面的HTML里加入几段javascript代码即可实现。下面我就带你剖析它的奥秘。 【最基本的弹出窗口代码】 其实代码非常简单： 因为这是一段javascript代码，所以它们应该放在之间。是对一些版本低的浏览器起作用，在这些老浏览器中如果不支持javascript，不会将标签中的代码作为文本显示出来。 Window.open ('page.html')用于控制弹出新的窗口page.html，如果page.html不与主窗口在同一路径下，前面应写明路径，绝对路径(http://)和相对路径(../)均可。 用单引号和双引号都可以，只是不要混用。 这一段代码可以加入HTML的任意位置，加入到
和之间也可以，位置越靠前执行越早，尤其是页面代码较长时，又想使页面早点弹出就尽量往前放。 【经过设置后的弹出窗口】 下面再说一说弹出窗口外观的设置。只要再往上面的代码中加一点东西就可以了。 我们来定制这个弹出窗口的外观、尺寸大小、弹出位置以适应该页面的具体情况。 "); //关闭,父窗口和子窗口都不弹出对话框,直接关闭 this.Response.Write(""); //弹出窗口刷新当前页面width=200 height=200菜单。菜单栏,工具条,地址栏,状态栏全没有 this.Response.Write(""); //弹出窗口刷新当前页面 this.Response.Write(""); this.Response.Write(" "); //关闭当前子窗口,刷新父窗口 this.Response.Write(""); this.Response.Write(""); //子窗口刷新父窗口 this.Response.Write(""); this.Response.Write("");打开网页全屏显示 关键字: js、javascript、打开网页全屏显示 Js代码 1.（1）打开全屏窗口 2.方法如下： 3.一：将下面的代码放在
与之间 4. 11. 12.二：将下面的代码复制到〈BODY〉区并修改其中的链接地址和名称。 13.全屏显示 14. 15.（2）实现真正的全屏 16.这种方法需按Alt+F4才能关闭。 17.代码如下： 18. 19. 20. 21.| 27. 28. 29. | 30.
『总结』JS常用方法与片段 1.javascript删除元素节点IE中有这样一个方 法:removeNode()，这个方法在IE下是好使的，但是在Firefox等标准浏览器中就会报错了removeNode is not defined，但是在核心JS中有一个操作DOM节点的方法叫：removeChild()。我们可以先去找到要删除节点的父节点，然后在父节点中运用removeChild来移除我们想移除的节点。我们可以定义一个方法叫removeElement：function removeElement(_element){ var _parentElement = _element.parentNode; if(_parentElement){ _parentElement.rem oveChild(_element); }}2.js sort方法根据数组中对象的某一个属性值进行升序或者降序排列/**数组根据数 组对象中的某个属性值进行排序的方法* 使用例子：newArray.sort(sortBy('number'),false) //表示根据number属性降序排列;若第二个参数不传递，默认表示升序排序* @param attr 排序的属性如number属性* @param rev true表示升序排列，false降序排序* */ sortBy: function(attr,rev){ //第二个参数没有传递默认升序排列if(rev == undefined){ rev = 1; }else{ rev = (rev) ? 1 : -1; }
return function(a,b){ a = a[attr]; b = b[attr]; if(a return rev * -1; } if(a > b){ return rev * 1; } return 0; } }3.charCodeAt()用法：charCodeAt() 方法可返回指定位置的字符的Unicode 编码。这个返回值是0 - 65535 之间的整数 语法：stringObject.charCodeAt(index) index参数必填，表示字符串中某个位置的数字，即字符在字符串中的下标。 注：字符串中第一个字符的下标是0。如果index 是负数，或大于等于字符串的长度，则charCodeAt() 返回NaN。例如：var str='Hello world!'document.write(str.charCodeAt(1))//结果：1014.js 页面刷新location.reload和location.replace的区别小结reload 方法，该方法强迫浏览器刷新当前页面。 语法：location.reload([bForceGet]) 参数：bForceGet，可选参数，默认为false，从客户端缓存里取当前页。true, 则以GET 方式，从服务端取最新的页面, 相当于客户端点击F5(“刷新”)replace 方法，该方法通过指定URL替换当前缓存在历史里（客户端）的项目，因此当使用replace方法之后，你不能通过“前进”和“后退”来
运行Regedit 打开注册表 打开网页时,网页不能占全屏是怎么回事 1:IE窗口最大化：拖放窗口方法要注意。 把打开的IE窗口用鼠标拖右下角至最大，先把其它IP窗口（不管大小）关闭，最后一个关闭拖至最大的窗口，再打开就最大了。 鼠标右键点任务栏IE图标－＞属性－＞运行方式选择最大化－＞应用 2: 【故障现象】每次打开的新窗口都是最小化窗口，即便单击“最大化”按钮后，下次启动IE 后新窗口仍旧是最小化的。 【故障点评】IE具有“自动记忆功能”，它能保存上一次关闭窗口后的状态参数，IE本身没有提供相关设置选项，不过可以借助修改注册表来实现。 【故障解决】 ①打开“注册表编辑器”，找到[HKEY_ CURRENT_USER＼Software＼Microsoft＼Internet Explorer＼Desktop＼Old WorkAreas]，然后选中窗口右侧的“OldWorkAreaRects”，将其删除。 ②同样在“注册表编辑器”中找到[HKEY_CURRENT_USER＼Software ＼Microsoft＼Internet Explorer＼Main]，选择窗口右侧的“Window_Placement”，将其删除。 ③退出“注册表编辑器”，重启电脑，然后打开IE，将其窗口最大化，并单击“往下还原”按钮将窗口还原，接着再次单击“最大化”按钮，最后关闭IE窗口。以后重新打开IE时，窗口就正常了！ 方法二:先关闭所有的IE浏览器窗口，用鼠标右键点击快速启动栏的IE浏览器图标，在出现的快捷菜单中点击“属性”，系统随即弹出“启动InternetExplorer浏览器属性”对话页面，点击“快捷方式”标签，在出现的页面的“运行方式(R)”中单击右侧的下拉条，选择“最大化”，再按“确定”退出。打开IE浏览器窗口，点击里面的链接，接着关闭先前打开的IE浏览器窗口，只留下这个链接页面，拉动边框将其窗口拉到整个屏幕，然后关闭该页面。从此，您打开IE浏览器窗口，就直接能看到最大化的页面了。 方法三:如果上述方法不灵，那可得修改计算机的注册表了。方法是：打开“注册表编辑器”，找到[HKEY_CURRENT_USER\Software\Microsoft\InternetExplorer\Desktop\OldkAreas]，然后选中弹出窗口右侧的一个选项“OldWorkAreaRects”,并删除。在“注册表编辑器”中找到[HKEY_CURRENT_USER\Software\Microsoft\InternetExplorer\Main]，选择窗口右侧的“Windos_Placement”，将其删除。退出“注册表编辑器”，重新启动电脑，然后打开IE，将其窗口最大化，并单击“向下还原”按钮将窗口还原，接着再次单击“最大化”按钮，最后关
网页常用小技巧 1. oncontextmenu="window.event.returnValue=false" 将彻底屏蔽鼠标右键
| no |
由于浏览器是无状态的，在这时候捕捉浏览器关闭会出现两种情况： 1.真正的关闭浏览器(a.点击关闭按钮b.右击任务栏关闭c.按alt+F4关闭) 2.刷新浏览器。 那如何判断区分这两种动作呢? 一. Javascript代码处理方法： function window.onbeforeunload() { //用户点击浏览器右上角关闭按钮或是按alt+F4关闭 if(event.clientX> { // alert("点关闭按钮"); document.getElementById("hiddenForm:hiddenBtn").click(); // "确定要退出本页吗?"; } //用户点击任务栏，右键关闭。s或是按alt+F4关闭 else if(event.clientY > || event.altKey) { // alert("任务栏右击关闭"); document.getElementById("hiddenForm:hiddenBtn").click(); // "确定要退出本页吗?"; } //其他情况为刷新 else { // alert("刷新页面"); } } 其中event.clientX //鼠标光标X坐标 //窗体工作区宽度 event.clientY //鼠标光标Y坐标 event.altKey //是否按下alt键 二. 事件捕捉方法：
" ); } 第三： private void Button3_Click( object sender, System.EventArgs e ) { Response.AddHeader( "Refresh","0" ); } 第四： private void Button6_Click( object sender, System.EventArgs e ) { //Response.Write( " " ); } 第五：(需替换<>)