最近在开发时遇到使用了Iframe的情况，在一个父窗口里使用了Iframe，之后又想在父窗口中使用JQuery来获得Iframe里的元素，之前有使用过，久没使用就忘了，今日记录下来。
格式：
事例：
格式：
事例：
格式：
事例：
格式：
事例：
1、iframe的创建比一般的DOM元素慢了1-2个数量级
iframe的创建比其他包括scripts和css的DOM元素的创建慢了1-2个数量级。当然页面一般不会包含太多的iframe，所以创建DOM节点花费的时间还不会占很大比重。
2、阻塞页面加载
及时触发window的onload事件是非常重要的。onload事件触发使浏览器的“忙”指示器停止，告诉用户当前网页已经加载完毕。当onload事件加载延迟后，它给用户的感觉是这个网页非常慢。
window的onload事件需要在所有iframe加载完毕后（包含里面的元素）才会触发。通过Javascript动态设置iframe的src可以避免这种阻塞情况。
3、唯一的连接池
浏览器只能开少量的连接到web服务器。绝大部分浏览器，主页面和其中的iframe是共享这些连接的。这意味着iframe在加载资源时可能用光了所有的可用连接，从而阻塞了主页面资源的加载。如果iframe中的内容比主页面的内容更重要，这当然是好的。但通常情况下，iframe里的内容是没有主页面重要的。这时iframe用光可用连接就不值得了。
4、不利于SEO
搜索引擎的检索程序无法解读iframe。另外，iframe本身不是动态语言，样式和脚本都需要额外导入。
综上，iframe应谨慎使用。
父窗口中 *** 作iframe $(window frames["iframeChild"] document) //假如iframe的id为iframeChild 在子窗口中 *** 作父窗口 $(window parent document) 接下来就可以继续获取iframe内的dom了 获取iframe内的dom对象有两种方法 $(window frames["iframeChild"] document) find("#child") $("#child" window frames["iframeChild"] document) 在父窗口中 *** 作 选中IFRAME中的所有单选按钮
复制代码 代码如下: $(window frames["iframeChild"] document) find("input[@type= radio ]") attr("checked" "true");在IFRAME中 *** 作 选中父窗口中的所有单选按钮
复制代码 代码如下: lishixinzhi/Article/program/Java/JSP/201311/20182
楼主会用jquery吗，可以使用jquery来从父页面获取子页面的iframe中的对象数据，也可以从子页面获取父页面的页面数据，参见如下说明： 父页面访问子页面内容： var $iframe = $($('#iframe_editImage')[0]contentWindowdocumentbody);$iframe
可以通过 windowtopframes 先获取全部 frame，在你的例子中有两个 frame
windowtopframes[0]：left
windowtopframes[1]：main
获得两个 frame 后就可以像平常一样获取页面元素
indexhtml
<!DOCTYPE html><html>
<head>
<title></title>
</head>
<frameset cols="300,">
<frame id="left" src="lefthtml">
<frame id="main" src="mainhtml">
</frameset>
</html>
lefthtml
<!DOCTYPE html><html>
<head>
<title>left</title>
</head>
<body>
<p>lefthtml</p>
<div id="num">12345</div>
</body>
</html>
mainhtml
<!DOCTYPE html><html>
<head>
<title>main</title>
<script type="text/javascript">
// windowtopframes[0] 为 lefthtml
var html = windowtopframes[0]documentgetElementById("num")innerHTML;
// 12345
alert(html);
</script>
</head>
<body>
<p>mainhtml</p>
</body>
</html>
将zTree放在一个iframe里
zTreeObj = $("#treeDemo")zTree(setting, zNodes);
如果在当前页面的话，通过var nodes = zTreeObjgetCheckedNodes(); 即可
那么点击父页面的按钮，如何得到zTree已选中的节点？
假设iframe的id和name为aa(id和name都设置，兼容性问题)
windowframes['aa']windowzTreeObjgetCheckedNodes();
1、首先需要在body中增加一个iframe，可以给这个标签设置宽高，还可以设置位置。
2、然后在前台界面的某个位置，增加一个点击事件onclick。
3、然后点击事件，总要对应的设置一个事件方法。
4、然后在方法内增加iframe的重载url，重新给src赋值。
5、最后运行html界面，点击前台的按钮，触发刷新iframe的方法，就完成了。
/
取得目标iframe src所包含的参数
@param iframeId - 目标iframe的id
@return Object 参数名值对，｛参数名:参数值,……｝
/
function getIframeParams(iframeId) {
var regexpParam = /\([\w\d%]+)=([\w\d%])&/g; //分离参数的正则表达式
var targetEle = documentgetElementById(iframeId);
var paramMap = null;
if(!!targetEle) {
var url = targetElesrc; //取得iframe的url
var ret;
paramMap = {};//初始化结果集
//开始循环查找url中的参数，并以键值对形式放入结果集
while((ret = regexpParamexec(url)) != null) {
//ret[1]是参数名，ret[2]是参数值
paramMap[ret[1]] = ret[2];
}
}
return paramMap; //返回结果集
}
用法：
假设iframe如下
<html><head>
</head>
<body>
<iframe id="test" src="urlparamA=a¶mB=b"></iframe>
</body>
</html>//获取参数名值对集合
var paramMap = getIframeParams('test');
//paramMap的结构是这样的：{'paramA':'a', 'paramB':'b'}
alert(paramMapparamA); //取出paramA的参数值
以上就是关于JQuery获取Iframe中的元素全部的内容，包括:JQuery获取Iframe中的元素、关于iframe的一些知识、jquery获取iframe中的dom对象(两种方法)等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）