jQuery操作iframe子页中元素代码实例

Posted 2020-06-11

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQuery操作iframe子页中元素代码实例相关的知识，希望对你有一定的参考价值。

jQuery操作iframe子页中元素代码实例:
本章节介绍一下如何在父页面中操作iframe子页面中的元素，希望能够给需要的朋友带来一定的帮助。
一.父页面代码:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script> 
<script type="text/javascript"> 
function getIframeDom(){ 
  var test=$("#theiframe").contents().find("#flag"); 
  alert(test.html()) 
} 
$(document).ready(function(){
  $("#link").click(function(){
    getIframeDom();
  })
})
</script> 
</head> 
<body> 
<iframe src="good.html" id="theiframe"></iframe>
<a href="#" id="link">点击查看效果</a> 
</body> 
</html>

二.子页面代码:

<!DOCTYPE html>    
<html>    
<head>    
<meta charset=" utf-8">    
<meta name="author" content="http://www.softwhy.com/" />  
<title>蚂蚁部落</title>  
</head>  
<body>  
<div>  
  <span id="flag">全选</span> 
</div>  
</body>  
</html>

在父页面中点击链接就可以弹出子页面中span元素中的内容。
相关阅读:
1.contents()函数可以参阅jQuery的contents()方法一章节。
2.find()函数可以参阅jQuery的find()方法一章节。

原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=13673

更多内容可以参阅:http://www.softwhy.com/jquery/

以上是关于jQuery操作iframe子页中元素代码实例的主要内容，如果未能解决你的问题，请参考以下文章

asp 网页 iframe 子页如何向父页回传参数

更新母版页中的面板和子页中的 asp 文件上传