iframe内联框架结合网站自我总结

136 阅读 0 评论 90 点赞

我是靠谱客的博主孝顺红牛，这篇文章主要介绍iframe内联框架结合网站自我总结，现在分享给大家，希望可以做个参考。

复制代码

<!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>
    
    <a href="" target="open_frame"></a>
    
    <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>

<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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<!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>