获取跨iframe的元素

一、页面设计及需求说明

现有一个主页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();
}

获取跨iframe的元素

猜你喜欢