我有一组链接可以将页面内容加载到iframe。 iframe只有父div的高度,如果需要则不会展开页面,而不是iframe显示垂直滚动条。 我不希望滚动条在那里,我希望iframe“扩展”(这是不可能的) - >每次加载到父div时,都会从iframe移动内容 例如: Welcome.html 的高度为2000px,但窗口只有900px,iframe显示滚动条。我希望 Welcome.html 的内容扩展页面。
<a href="pages/welcome.html" target="ifrMain">Welcome</a>
<a href="anotherLongPage.html" target="ifrMain">Another page</a>
<div id="divMain"><iframe id="ifrMain" src="pages/welcome.html"></iframe></div>
我不介意使用jQuery。类似“当iframe的内容发生变化时,将它们移动到父div。”
答案 0 :(得分:3)
确保您正在使用服务器,并且您加载的iframe使用相同的协议。以下是您的问题的代码
Javascript将包含在页面的头部
<script type="text/javascript">
function getDocHeight(doc) {
doc = doc || document;
// stackoverflow.com/questions/...
var body = doc.body, html = doc.documentElement;
var height = Math.max( body.scrollHeight, body.offsetHeight,
html.clientHeight, html.scrollHeight, html.offsetHeight );
return height;
}
function setIframeHeight(id) {
var ifrm = document.getElementById(id);
console.log(ifrm)
var doc = ifrm.contentDocument? ifrm.contentDocument:
ifrm.contentWindow.document;
ifrm.style.visibility = 'hidden';
ifrm.style.height = "10px"; // reset to minimal height ...
// IE opt. for bing/msn needs a bit added or scrollbar appears
ifrm.style.height = getDocHeight( doc ) + 4 + "px";
ifrm.style.visibility = 'visible';
}
</script>
HTML
<iframe onload="setIframeHeight(this.id)" id="myframe" width="300" height="300" src="youpathtopagehere"></iframe>
您应该只在onload事件上调用函数。否则它将无法正确计算高度。
答案 1 :(得分:0)
这取决于各种因素。
Internet Explorer 8及更高版本(以及其他现代浏览器)具有postMessage
API。在iFrame的内容中,您运行parent.postMessage(JSON.stringify({action: 'resize', height: 2000}, "*");
并在您运行的父级(您的页面)中运行 -
$(window).bind(
"message",
function (e)
{
var data = JSON.parse(e.originalEvent.data);
if (data.action === "resize")
{
// You must initialize iFrameElement first,
// or just get it here using document.getElementById or something.
iFrameElement.height = data.height;
}
});
如果iFrame显示相同的原始内容且您必须支持Internet Explorer 7,则为iFrame指定name
属性,iFrame可以调用window.parent.document.getElementsByTagName(window.name)[0].height = 2000;
。
如果它是跨源内容则更复杂。如果您需要,请告诉我(并且您必须控制该原始内容)。
答案 2 :(得分:0)
你应该做的
function iframeLoaded() {
var iFrameID = document.getElementById('ifMain');
var wrapper = document.getElementById('wrapper');
if(iFrameID) {
$("#divMain").css("height", $(iFrameID.contentWindow.document).height()+"px");
}
}
有效