<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>主页面</title>
</head>
<body>
<div class="top">
<p>头部尾部</p>
</div>
<div class="left">
<p>左边位置</p>
</div>
<!-- 父页面的target="open_frame" 相当于 iframe 的 name="open_frame" -->
<a href="" target="open_frame"></a>
<!-- iframe内联框架 -->
<div class="right">
<p>iframe内联框架</p>
<div class="iframe">
<div class="main">
<iframe id="main_frame" name="open_frame" border="0" frameboder="0" scrolling="auto" width="100%" height="100%" src="./mainContext.html"></iframe>
</div>
</div>
</body>
<!-- iframe内联框架,配置原始的宽高 -->
<script>
var $height=$(window).height();
$('iframe').css({'height':$height-140});
// 子页面获取iframe父页面元素的方法,方法一:
var $arrow = $(".triangle-right", window.parent.document);
// 子页面获取iframe父页面元素的方法,方法二:
var $arrow = $(window.parent.document).find(".triangle-right");
// 父级页面获取iframe子页面元素的方法
var $mainCon = $("#mainCon",document.frames('iframename').document);
/******************************************************************
1,使用iframe内联框架后，如果主页面只有一个iframe，
那么 top = parent ==>子页面调用主页面元素调用
2，iframe 子页面本身元素的调用 ===> top = parent = windows
******************************************************************/
</script>
</html>