内容来自https://www.cnblogs.com/thiaoqueen/p/7277964.html,摘抄……
父页面:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>iframe(子)页面内容</title>
</head>
<body>
<div id="iframeElementId">父页面元素内容</div>
</body>
</html>
子页面:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>iframe(子)页面内容</title>
</head>
<body>
<div id="iframeElementId">www.koyoz.com</div>
</body>
</html>
js示例:
<script type='text/javascript'>
//1.在父页面中(index.html)执行JS直接访问子页面(iframe.html)中的元素
//Javascript写法:
document.getElementById('frameId').contentWindow.document.getElementById('iframeElementId').style.color='red';
//jQuery写法:
$("#koyoz").contents().find("#test").css('color','red');
//2.实用的示例1:在父窗口中操作,选中IFRAME中的所有单选钮。
//jQuery写法:
$(window.frames["iframe1"].document).find("input:radio").attr("checked","true");
//3.实用的示例2:在子窗口中操作,选中父窗口中的所有单选钮。
//jQuery写法:
$(window.parent.document).find("input:radio").attr("checked","true");
//4.实用的示例3:父窗口想获得IFrame中的Iframe
//jQuery写法:
$(window.frames["iframe1"].frames["iframe2"].document).find("input:radio").attr("checked","true");
//5.实用的示例4:在子窗口中调用父窗口中的另一个子窗口的方法
//jQuery写法:
parent.frames["Main"].Fun();
//【其他方法】:
//在iframe子页面获取父页面元素
$('#objId', parent.document);
//在父页面 获取iframe子页面的元素
$("#objid",document.frames('iframename').document);
$(document.getElementById('iframeId').contentWindow.document.body).html();
//显示iframe中body元素的内容。
$("#testId", document.frames("iframename").document).html();
//根据iframename取得其中ID为"testId"元素
$(window.frames["iframeName"].document).find("#testId").html();
</script>