个人中心
gpt4 book ai didi

javascript - 根据内容动态更改 iFrame 高度将不起作用

转载 作者：太空宇宙 更新时间：2023-11-04 11:51:25 25 4
gpt4 key购买 nike

好的，我很清楚这里有几个关于根据其中的内容更改 iFrame 的高度的问题，但似乎没有任何效果。我已经尝试了几乎所有的方法，但似乎没有任何效果，我需要快速的帮助。提前感谢您的帮助。

抱歉，代码不是很整洁

代码在这里

body {
    width: 100vw;
    height: 100vh;
    margin: 0px;
    padding: 0px;
    background-color: #E1E1E1;
}

@keyframes spin {
    0% {transform: rotate(0deg);}
    100% {transform: rotate(360deg);}
}

h1 {
    margin: 0px;
}

#hBody {
    width: 100vw;
    height: 100vh;
    //overflow: hidden;
}

#hubContain {
    width: 85%;
    margin: auto;
    min-height: 100%;
    position: relative;
    box-sizing: border-box;
}

#navBarDiv {
    width: 100%;
    height: 15%;
    min-width: 950px;
    left: 0;
    top: 0;
    float: left;
    position: relative;
    box-sizing: border-box;
    padding: 0px;
    display: block;
    margin: auto;
    z-index: 2;
    text-align: center;
}

#navHead {
    text-align: left;
    font-size: 50px;
    font-family: Abadi MT Condensed Extra Bold;
    font-weight: bold;
    padding: 2px 0px 2px 0px;
}

#mainC {
    width: 100%;
    position: relative;
    box-sizing: border-box;
    /*height: -webkit-calc(100% - 15% - 32px);
    height: -moz-calc(100% - 15% - 32px);*/
    float: left;
    top: 0;
}

#mainC iframe {
    width: 100%;
    //height: 100%;
    border: none;
    padding: 0px;
}

ul {
    list-style-type: none;
    padding: 0px;
    margin: 0px;
    //display: block;
    background-color: #EFEFEF;
    position: relative;
    border-radius: 3px;
    box-shadow: 8px 5px 10px #CCCCCC;
}

ul li {
    display: inline-block;
}

ul li a {
    padding: 16px;
    display: block;
    margin: 0px;
    font-size: 18px;
    font-family: pt sans;
    text-decoration: none;
    font-weight: bold;
    letter-spacing: 2px;
}

ul ul {
    display: none;
    top: 100%;
    padding: 0px;
    margin: 0px;
    z-index: 1000;
    position: absolute;
    background-color: #D5D5D5;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}

ul ul li {
    display: block;
}

ul ul li:nth-last-child(1) {
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}

iframe {
    z-index: 1;
    padding: 0px;
    margin: 0px;
}

/*
* {
    outline: 2px solid blue;
    //animation: spin 2s infinite linear;
}
*/
<!DOCTYPE html>
<html>
    <head>
        <title>
            TBD
        </title>
        <link rel="stylesheet" type="text/css" href="style.css">
		<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=PT+Sans" rel="stylesheet" type="text/css">
        <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
        <script type="text/javascript">
            function changeFrameSize() {
                var iframe = document.getElementById("mainFrame");
                var frameHeight = getComputedStyle(iframe.contentDocument.body);
                var heightChange = parseFloat(frameHeight.scrollHeight);
                iframe.style.height = heightChange;
                console.log(iframe.style.height);
            };

            function checkKey(e) {
                var key = e.keyCode;
                if(key === 85) {
                    changeFrameSize();
                };
            };

            window.addEventListener("keydown", checkKey);

            $(document).ready(function() {

                $("html, body").animate({scrollTop: '0px'}, 0);
            
                $("#dropdownLi").mouseenter(function() {
                    $("li ul").stop().slideDown();
                });
                
                $("#dropdownLi").mouseleave(function() {
                    $("li ul").stop().slideUp();
                });
                
                $("#firstUl > li").mouseenter(function() {
                    $(this).stop().animate({
                        backgroundColor: "#D4D1D1"
                    }, 250);
                });
                
                $("#firstUl > li").mouseleave(function() {
                    $(this).stop().animate({
                        backgroundColor: "#EFEFEF"
                    }, 250);
                });
                
                $("#dropdownLi ul li").mouseenter(function() {
                    $(this).stop().animate({
                        backgroundColor: "#A9A9A9"
                    }, 250);
                });
                
                $("#dropdownLi ul li").mouseleave(function() {
                    $(this).stop().animate({
                        backgroundColor: "#D5D5D5"
                    }, 250);
                });
            });
        </script>
    </head>
    <body id="hBody">
        <div id="hubContain">
            <div id="navBarDiv">
                <div id="navbar">
                    <h1 id="navHead">
                        TBD
                    </h1>
                    <ul id="firstUl">
                        <li>
                            <a href="index.html" target="mainFrame">Home</a>
                        </li>
                        <li>
                            <a href="bInfo.html" target="mainFrame">Background Information</a>
                        </li>
                        <li>
                            <a href="contact.html" target="mainFrame">Contact</a>
                        </li>
                        <li>
                            <a href="tprocess.html" target="mainFrame">Thought Process</a>
                        </li>
                        <li id="dropdownLi">
                            <a href="#">Layouts</a>
                            <ul>
                                <li>
                                    <a href="lpages.html" target="mainFrame">Landing Pages</a>
                                </li>
                                <li>
                                    <a href="mlayouts" target="mainFrame">Main Layouts</a>
                                </li>
                                <li>
                                    <a href="tTenLayouts.html" target="mainFrame">Top 10 Layouts</a>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </div>
            <div id="mainC">
                <iframe src="index.html" id="mainFrame" name="mainFrame"></iframe>
            </div>
            <div id="footerC">
            
            </div>
        </div>
    </body>
</html>

最佳答案

我使用了他们在 DynamicDrive.com 中提供的代码，链接如下:http://dynamicdrive.com/dynamicindex17/iframessi2.htm我在我的网站上使用了很长时间，效果很好。设置起来非常容易。

它不使用 JQuery 而只是 js，它在我理解的 Opera 浏览器中不起作用，而且如果要加载到 iframe 上的内容来自其他域，它也不起作用。

js不长而是短，所以你可以根据需要学习它，尽管你不需要理解它来使用它或设置它。

关于javascript - 根据内容动态更改 iFrame 高度将不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30610043/

25 4 0
文章推荐： javascript - 从子元素中删除 Size 和 font-size
文章推荐： c++ - 从成员函数返回一个只能 move 的对象
文章推荐： c++ - 如何在 VS 2012 中查看 C++ 链接命令
文章推荐： jquery - 内容出现在汉堡包导航之外
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com