0
好吧，我很清楚這裏有幾個關於根據其中的內容更改iFrames高度的問題，但似乎沒有任何工作。我已經嘗試了一切，但似乎沒有任何工作，我需要快速幫助。感謝您提前提供任何幫助。基於內容動態更改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">
\t \t <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>
看看這個問題。 [使基於內容內 - JQUERY /使用Javascript iframe高度動態] [1] [1]：http://stackoverflow.com/questions/9162933/make-iframe-height-dynamic-based -on-content-inside-jquery-javascript –
我已經做了類似的事情，但我得到這個錯誤： 未捕獲SecurityError：阻止一個框架的原點「null」訪問一個框架與原點「null」。協議，域和端口必須匹配。 – Ryan