一、页面设计及需求说明
现有一个主页mainPage.html,其中有两个iframe为Aframe和Bframe。其中按钮B是负责Bframe页面的数据查询
现在需要实现:点击Aframe中的按钮A,就能点击Bframe的按钮B。
(说明:在实际业务中,可能Aframe中的按钮进行了一部分业务操作,使得Bframe中的数据发生了改变,但不想重新请求整个Bframe,这时就需要获取到Bframe中的按钮B,进行局部的数据刷新。)
二、代码结构
在web根目录下,有mainPage.html(主页),AframeContent.html(Aframe),BframeContent.html(Bframe),student.json(模拟请求的数据)
mainPage.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>主页</title>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.8.3/jquery.min.js"></script>
</head>
<body>
<iframe id="Aframe" src="AframeContent.html"></iframe>
<iframe id="Bframe" src="BframeContent.html"></iframe>
</body>
</html>
AframeContent.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Aframe内容</title>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
function tipA() {
// 需要实现功能的部分
}
</script>
</head>
<body>
<input type="button" id="Ainput" name="Ainput" value="按钮A" onclick="tipA()"/>
</body>
</html>
BframeContent.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Bframe内容</title>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
function tipB() {
$.ajax({
url:"student.json",
success:function (responseText) {
var id = responseText.id;
var name = responseText.name;
var age = responseText.age;
$("#contentDivB").html("id===="+id
+"<br/>name===="+name
+"<br/>age===="+age);
}
});
}
</script>
</head>
<body>
<input type="button" id="Binput" name="Binput" value="按钮B" onclick="tipB()"/>
<div id="contentDivB"></div>
</body>
</html>
student.json
{"id":"1001","name":"张三","age":10}
三、功能实现
方法一:(直接在Aframe页面中获取dom元素按钮B,然后做点击操作)
function tipA() {
// chrome和firefox中的写法
/*var Binput = window.parent.frames['Bframe'].contentDocument.getElementById("Binput");*/
// ie中的写法
/*var Binput = window.parent.document.frames['Bframe'].document.getElementById("Binput");
Binput.click();*/
// chrome、firefox、ie三个通用的写法
var Binput = window.parent.document.getElementById("Bframe").contentDocument.getElementById("Binput");
Binput.click();
}
这个参考了网上的各种写法(主要参考https://zhidao.baidu.com/question/564192613.html),最后试出了一种通用的写法。
方法一是直接哪个页面需要取其他iframe页面的元素,就单独写一个方法,如果说很多其他打开的iframe页面也有类似的需求,那就会产生很多重复的代码。
方法二:(在mainPage.jsp中提供一种获取iframe元素的方法,然后在想要实现功能页面直接调用)
mainPage.jsp页面添加如下js:
/**
* 获取跨iframe的元素
* @param selector
* @param iframeName
* @returns {*|jQuery|HTMLElement}
*/
function getIframeEle(selector, iframeName) {
/*
// 刚开始没有试出通用写法,就根据不同浏览器的报错写了这一种
var ifm = window.document.getElementById(iframeName);
var ifmDocument = document.frames ? document.frames[iframeName].document : ifm.contentDocument;*/
// chrome、firefox、ie三个通用的写法
var ifmDocument = window.parent.document.getElementById(iframeName).contentDocument;
return $(selector ,ifmDocument);
}
如果项目中用到了ExtJs(关于ExtJs获取dom元素,可以参考https://blog.csdn.net/idomyway/article/details/78647757),上面这个方法还可以写成:
function getIframeEle(selector, iframeName) {
return $(selector, Ext.get(iframeName).dom.contentDocument);
}
比如我现在要在Aframe中获得Bframe中的按钮B,进行点击操作。只要将tipA方法写成:
function tipA() {
var Binput = parent.getIframeEle("#Binput", "Bframe");
Binput.click();
}