Question

好的，我很清楚这里有一些关于根据内部内容更改iFrames高度的问题，但似乎没有任何效果。我已经尝试了所有的东西，但似乎没有任何工作，我需要快速帮助。感谢您提前提供任何帮助。

抱歉代码不是很整洁

CODE HERE

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>

Answer 1

我在DynamicDrive.com提供的代码中使用了这个代码，这里是链接：http://dynamicdrive.com/dynamicindex17/iframessi2.htm我在我的网站上使用了很长时间并且工作得很好。设置起来非常简单。

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

js并不长，所以你可以根据需要进行研究，尽管你不需要理解它来使用它或进行设置。

基于内容动态更改iFrame高度将无法正常工作

1 个答案: