发生的事情是,我有一个iframe带来的结果从一个链接,iframe的宽度将始终是相同的,但取决于结果的数量,iframe的高度变化,所以我想知道我怎么能做到调整iframe的大小每次结果显示没有滚动。
你没有提供源代码,很难意识到你的问题在哪里。
然而,尝试这个解决方案,使iframe取浏览器的宽度和高度。
,
css:
html,body{
width:100%;
height:100vh;
overflow:hidden;
margin:0px;
padding:0px;
border:none;
}
iframe{
width:100%;
height:100vh;
overflow:hidden;
margin:0px;
padding:0px;
border:none;
}
Html:
<iframe src="https://blogger.com" name="otherSite"></iframe>
你必须复制并粘贴代码,因为它不能在代码片段中运行。
iframe不能设置自己的大小,它是由父窗口决定和控制的。这一点尤其重要,因为iframe的源可能是另一个域的一部分。允许外部域控制我们的域将是一种安全风险。仔细阅读postMessage文档,以确保帧之间正确的消息处理-
parent.html
<html>
<head>
<script>
// when message is received …
// if it is from our trusted origin …
// and the message is an object …
// and the message type is "resize" …
// then resize the iframe
window.addEventListener("message", event => {
if (event.origin != "http://example.org") return
if (typeof event.data != "object") return
if (event.data.type != "resize") return
const iframe = window.frames.myframe
iframe.setAttribute("width", event.data.width)
iframe.setAttribute("height", event.data.height)
})
</script>
</head>
<body>
my content…
<iframe name="myframe" src="/myframe.html" />
</body>
</html>
myframe.html
<html>
<head>
<script>
// sendSize function
// get the width and height of the document
// and post the values to the parent frame
function sendSize() {
window.parent.postMessage(
{
type: "resize",
width: document.documentElement.scrollWidth,
height: document.documentElement.scrollHeight
},
"http://example.org"
)
}
// when this window loads or resizes …
// call our sendSize function
window.addEventListener("load", sendSize)
window.addEventListener("resize", sendSize)
<script>
</head>
<body>
…
</body>
</html>