js iframe 父子页面之间的通信做法

父页面 parent.html

onclick="callChild()">

子页面 child.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.do cument.getElementById("button")其中的window都是可以省略的。

注意事项

要确保在Iframe加载完成后再进行操作，如果Iframe还未加载完成就开始调用里面的方法或变量，无疑会产生错误。判断Iframe是否加载完毕有两种方法：

1.在Iframe上用onload事件;

2.用document.readyState=="complete"来判断

二、跨域父子页面通信方法

如果iframe所链接的是外部页面，因为安全机制则不能使用同域名下的通信方式了。在《SNS平台与第三方APP的JS通信实现》中提供易于且具有通用性的通信方式。父页面向子页面传递数据

实现的技巧就是利用 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 对象的引用，这样我们就能直接条用父页面中方法啦。

父窗口调用iframe子窗口方法

myFrame.window.functionName();

iframe子窗口调用父窗口方法

parent.functionName();

父窗口页面

子窗口页面

IFrame问题汇总

取Iframe有两种方式：

1.ifr_id = document.getElementById("ifr"); //取到的是dom结果，主要用于操作property，改变Height，width之类的用这个

2.ifr_window = window.frames["ifr"]; //取到的是文档结果，可以取到文档的内容，如ifr_window.document.body.innerHTML

不同的对象用于不同的场合，注意不要弄混。

方法互调：

父调子：ifr_window.subMethod();

子调父：parent.topMethod();

注意用到的都是window.frames["ifr"]的方式取到的对象。

在Iframe加载完成后再进行操作

如果Iframe还未加载完成就开始调用里面的方法或变量，无疑会产生错误。判断Iframe是否加载完毕有两种方法：

1.在Iframe上用onload事件;

2.用document.readyState=="complete"来判断

跨域

并不是所有情况下父页面都可以操作子页面的。哪些情况下允许互相操作呢？

1.两个页面都是处于同一域名下，如https://www.360docs.net/doc/7b7656258.html,/；

2.两个页面处于同一父域名下，如https://www.360docs.net/doc/7b7656258.html,/和https://www.360docs.net/doc/7b7656258.html,，这种情况默认是不能互访的，但是通过设置document.domain来让其互访，下面会具体讲到。

如果父页面在https://www.360docs.net/doc/7b7656258.html,下，引用了一个https://www.360docs.net/doc/7b7656258.html,的Iframe，那么父页面的JS不能读取Iframe的结构，这个问题就是跨域。

为什么要禁止这个操作呢？如果可以随意操作的话，我在自己的站点上引用163的页面，然后读取Iframe的cookie，那么163用户cookie里记住的密码就被收集到了。

解决跨域的方法：

1.对于在同一父域名下的，如上面的第二种情况，通过设置document.domain=https://www.360docs.net/doc/7b7656258.html, 可让其实现互相访问;

2.对于不在同一父域名下的，但纯用JS是不能实现让其互访的，有一个变通的方法是类似ajax代理，即在https://www.360docs.net/doc/7b7656258.html,下新建一个页面，在server端其访问https://www.360docs.net/doc/7b7656258.html,下面的这个页面，将待访问的这个页面内容输出出来，然后再引用这个新建的页面，就变成在同一域名下了。

自适应高度

自适应高度平时用的较多，这里贴一段代码，兼容目前的各种浏览器

代码

用Js脚本实现页面跳转

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秒刷新一次页面.

JS关闭窗口弹出新窗口,关闭新窗口时,刷新父窗口,JS代码实现刷新网页,js实现弹出窗口代码收集集萃

经常上网的朋友可能到过这样一些网站，一进入首页立刻会弹出一个窗口，或者按一个链接或按钮弹出，通常在这个窗口里会显示一些注意事项、版权信息、警告、欢迎光顾之类的话或者作者想要特别提示的信息。其实制作这样的页面非常容易，只要往该页面的HTML里加入几段javascript代码即可实现。下面我就带你剖析它的奥秘。【最基本的弹出窗口代码】其实代码非常简单：因为这是一段javascript代码，所以它们应该放在之间。是对一些版本低的浏览器起作用，在这些老浏览器中如果不支持javascript，不会将标签中的代码作为文本显示出来。 Window.open ('page.html')用于控制弹出新的窗口page.html，如果page.html不与主窗口在同一路径下，前面应写明路径，绝对路径(http://)和相对路径(../)均可。用单引号和双引号都可以，只是不要混用。这一段代码可以加入HTML的任意位置，加入到和之间也可以，位置越靠前执行越早，尤其是页面代码较长时，又想使页面早点弹出就尽量往前放。【经过设置后的弹出窗口】下面再说一说弹出窗口外观的设置。只要再往上面的代码中加一点东西就可以了。我们来定制这个弹出窗口的外观、尺寸大小、弹出位置以适应该页面的具体情况。

验证码：

看不清?

js弹出窗口总结6种弹窗方法

js弹出窗口总结6种弹窗方法注: //关闭,父窗口弹出对话框,子窗口直接关闭 this.Response.Write(""); //关闭,父窗口和子窗口都不弹出对话框,直接关闭 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常用方法与片段

『总结』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方法之后，你不能通过“前进”和“后退”来

js实现页面跳转的详解

对于 window.location.href="login.jsp?backurl="+window.location.href; 第二种：第三种：第四种：第五种： 2.javascript:指的是伪协议，是指用url的形式调用javascript 这句话相当于调用了javascript方法jump(“https://www.360docs.net/doc/7b7656258.html,”); 3.另外摘自网友的描述：关于js中"window.location.href"、"location.href"、 "parent.location.href"、"top.location.href"的用法 "window.location.href"、"location.href"是本页面跳转 "parent.location.href"是上一层页面跳转 "top.location.href"是最外层的页面跳转

JS脚本大全各种常用脚本

网页常用小技巧 1. oncontextmenu="window.event.returnValue=false" 将彻底屏蔽鼠标右键

可用于Table 2. 取消选取、防止复制 3. onpaste="return false" 不准粘贴 4. oncopy="return false;" oncut="return false;" 防止复制 5. IE地址栏前换成自己的图标 6. 可以在收藏夹中显示出你的图标 7. 关闭输入法 8. 永远都会带着框架 9. 防止被人frame 10. 网页将不能被另存为 11. 12.删除时确认删除 13. 取得控件的绝对位置 //Javascript " ); } 第三： private void Button3_Click( object sender, System.EventArgs e ) { Response.AddHeader( "Refresh","0" ); } 第四： private void Button6_Click( object sender, System.EventArgs e ) { //Response.Write( " " ); } 第五：(需替换<>)