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

最新推荐文章于 2021-09-04 15:02:45 发布

gcl_guyunlige

最新推荐文章于 2021-09-04 15:02:45 发布

阅读量264

点赞数

分类专栏： javascript HTML5

本文链接：https://blog.csdn.net/gaokcl/article/details/81386815

版权

javascript 同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

HTML5

2 篇文章 0 订阅

订阅专栏

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

gcl_guyunlige

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
iframe内联框架结合网站自我总结

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;主页面&lt;/title&gt;&lt;/head&gt;&lt;body&gt; &l
复制链接

扫一扫