js操作iframe兼容各种主流浏览器示例代码

遇到了操作iframe的相关问题,其实就是在操作iframe内部某个窗体时,调用父窗体的一个函数,下面与大家分享下操作iframe兼容各种浏览器的方法
 

在做项目时,遇到了操作iframe的相关问题。业务很简单,其实就是在操作iframe内部某个窗体时,调用父窗体的一个函数。于是就写了两个很简单的htm页面用来测试,使用网上流行的方法在谷歌浏览器中始终报错,不能通过。
父页面parent.html的代码如下

复制代码 代码如下:

<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>
</title>
<script src="jquery-1.10.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
function ParentFunction() {
alert('ParentFunction');
}
</script></head>
<body>
<input type="button" id="btnCancel" class="button" value="测试" />
<iframe id="FRMdetail" name="FRMdetail" frameborder="0" src='child.html' style="width:100%;height:100%;" ></iframe>
</body>
</html>

子页面child.html的代码如下

复制代码 代码如下:

<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>
</title>
<script src="jquery-1.10.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#btnTest").click(function (e) {
var t=window.parent;
t.ParentFunction();
});
})
</script></head>
<body>
<input type="button" id="btnTest" class="button" value="应该获取的值" />rrr
</body>
</html>

网络上流行的方法 var t=window.parent; t.ParentFunction();在IE中能调用,可是在谷歌浏览器中总是提示如下错误,
Blocked a frame with origin "null" from accessing a frame with origin "null". Protocols, domains, and ports must match.
网上找了很长时间都没法发现方法,有的也是很早以前的版本,基本上没用了,而且人云亦云,基本上没有测试过。于是自己摸索,后来才发现,谷歌浏览器其实那种方法其实也可以,只是很奇怪,必须发布后才可以,在文件系统中调用,就会出现上边的错误。
其实还有一种html5的方法postMessage,于是就根据着进行了改写,最终代码如下:
父页面parent.html的代码如下

复制代码 代码如下:

<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>
</title>
<script src="jquery-1.10.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
this.ParentFunction= function() {//和注释掉的方法是一样的,也就是说加不加this都是一样的,因为此处的this就是windows
alert('ParentFunction');
}
// function ParentFunction() {
// alert('ParentFunction');
// }
function receiveMessage(e) {
var data = e.data;
if(data=="ParentFunction")
{
ParentFunction() ;
}
}
if (typeof window.addEventListener != 'undefined') {//使用html5 的postMessage必须处理的
window.addEventListener('message', receiveMessage, false);
} else if (typeof window.attachEvent != 'undefined') {
window.attachEvent('onmessage', receiveMessage);
}
</script></head>
<body>
<input type="button" id="btnCancel" class="button" value="测试" />
<iframe id="FRMdetail" name="FRMdetail" frameborder="0" src='child.html' style="width:100%;height:100%;" ></iframe>
</body>
</html>

子页面child.html的代码如下

复制代码 代码如下:

<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>
</title>
<script src="jquery-1.10.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#btnTest").click(function (e) {
var t=window.parent;
if(!t.ParentFunction)//在不支持时,使用html5 的postMessage方法
{
t.postMessage("ParentFunction", '*');
}
else
{
t.ParentFunction();
}
});
})
</script></head>
<body>
<input type="button" id="btnTest" class="button" value="应该获取的值" />rrr
</body>
</html>

经过改写后,在文件系统中虽然也会出现那个错误,但需要调用的方法确实调用了,目的确实达到了,不影响使用了。

时间: 2016-07-23

js操作iframe兼容各种主流浏览器示例代码的相关文章

js操作iframe兼容各种主流浏览器示例代码_javascript技巧

在做项目时,遇到了操作iframe的相关问题.业务很简单,其实就是在操作iframe内部某个窗体时,调用父窗体的一个函数.于是就写了两个很简单的htm页面用来测试,使用网上流行的方法在谷歌浏览器中始终报错,不能通过. 父页面parent.html的代码如下 复制代码 代码如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head><title> </title> <script src

js复制网页内容并兼容各主流浏览器的代码

 js 复制网页内容的方法代码有很多不过要兼容各浏览器就不多了,下面有个不错的方法,大家可以尝试操作下 因需要做一个js单击,复制当前网页url的功能.使用的是如下的方法,但是只能在ie浏览器下正常使用.    方法如下:  代码如下: function copyURL(){  var clipBoardContent="";  clipBoardContent+=document.title;  clipBoardContent+="";  clipBoardCo

js复制网页内容并兼容各主流浏览器的代码_javascript技巧

因需要做一个js单击,复制当前网页url的功能.使用的是如下的方法,但是只能在ie浏览器下正常使用. 方法如下: 复制代码 代码如下: function copyURL(){ var clipBoardContent=""; clipBoardContent+=document.title; clipBoardContent+=""; clipBoardContent+=this.location.href; window.clipboardData.setData

HTML+CSS+JS实现完美兼容各大浏览器的TABLE固定列

 HTML+CSS+JS实现完美兼容各大浏览器的TABLE固定列  本文给大家分享的是使用HTML+CSS+JS实现完美兼容各大浏览器的TABLE固定列的方法和示例,非常的实用,特别是在BS架构的企业级应用,有需要的小伙伴可以参考下.     BS架构的企业级应用中,当一个表格列数较多时,用户一个常见的需求就是把前面几个重要的列固定住,这样拖动滚动条时固定的列会方便用户查看数据,用户体验很好.一些重量级的JS组件库也都有这个功能,那么有没有更简单的方法实现这个功能呢? 这个需求常见的解决方案是使

JS操作iframe里的dom的介绍

本篇主要是对JS操作iframe里的dom进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助 直接赋值如下代码测试即可明白:   1.html: 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http

Js操作DOM元素及获取浏览器高宽的简单方法_javascript技巧

在JavaScript中,经常会来获取Document文档元素,是 HTML 文档对象模型的英文缩写,Document Object Model for HTML,是基于浏览器编程,HTML DOM 定义了用于 HTML 的一系列标准的对象,以及访问和处理 HTML 文档的标准方法. 通过 DOM,可以访问所有的 HTML 元素,连同它们所包含的文本和属性.可以对其中的内容进行修改和删除,同时也可以创建新的元素.HTML DOM 独立于平台和编程语言.它可被任何编程语言诸如 Java.JavaS

css 图片垂直居中(兼容各主流浏览器,含IE6/IE7)

1.利用table-cell实现居中,font-size做兼容兼容IE6+/FF/Chrome 优点:不添加任何多余标签,兼容主流浏览器  代码如下 复制代码 <!--html结构--> <div class="box-1">  <a class="img-wrap-1" href="#">   <img src="images/1.png" alt="" />

利用js动态添加删除table行的示例代码

 本篇文章主要是对利用js动态添加删除table行的示例代码进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助 如下所示:    代码如下: //动态添加行 function addRow(){    var table = document.getElementById("tableID");    var newRow = table.insertRow(); //创建新行    var newCell1 = newRow.insertCell(); //创建新单元格    

js获取url中指定参数值的示例代码

 这篇文章主要是对js获取url中指定参数值的示例代码进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助 如下所示: 代码如下:  ///获取url中指定参数         // <param name="paras">参数名称</param>         ///         function request(paras) {             var url = location.href;             var paraStr