iframe嵌套，jq父页面获取子页面变量，Dom元素

最新推荐文章于 2023-11-22 17:23:42 发布

原创最新推荐文章于 2023-11-22 17:23:42 发布 · 2k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#iframe嵌套

本文详细介绍如何在父页面中获取子iframe内的DOM元素、变量及处理多级嵌套iframe的技巧。包括使用jQuery操作iframe内元素的具体方法，以及通过contentWindow访问子页面变量的示例。

1.父页面获取子页面id为“#st”的dom

var getSomething=$("iframe").contents().find("#st");

2获取多级iframe嵌套的dom元素

let getSomething = $("iframe").contents().find("iframe").contents().find("#something");

往后追加 contents().find("iframe")即可

3.父页面拿子页面的变量

var win = $("#mainFrame")[0].contentWindow;
//假如子页面有一个变量flag为false；想要更改它的值。
win.flag=true

//1.在a.jsp中通过top.$.jBox.open打开一个弹窗弹窗中的内容为b.jsp
//2.b.jsp中通过<iframe>标签(id为indexIfm)嵌套着一个c.jsp
function toLike(a,unLikeIndex){
		top.$.jBox.open(
			"iframe:${ctxf }/index/toLike.do?unLikeIndex="+unLikeIndex, "匹配", 900,500, {
				buttons : {
					"关闭" : true,
					"确定" : "ok"
				},
				bottomText:"选中要匹配的内容，点击确定。",
				submit:function(v,h,f){
					if(v=="ok"){
//在a.jsp中获取c.jsp中的js元素testId
                                                testElement = h.find("iframe")[0].contentWindow.$("#indexIfm")[0].contentWindow.testId;
//在a.jsp中获取c.jsp中的dom元素，id为domId的<input>
                                                testDom = h.find("iframe")[0].contentWindow.$("#iframeId").contents().find("#domId").val();
//在a.jsp中获取c.jsp中标签名称为checkbox的所有元素
						obj = h.find("iframe")[0].contentWindow.$("#indexIfm")[0].contentWindow.document.getElementsByName("checkbox");
						}
                                }
                        });
                }

参考博客：https://blog.youkuaiyun.com/Just_Maybe/article/details/96143817