如何制作适合其内容大小的iframe ?



发生的事情是,我有一个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>

相关内容

  • 没有找到相关文章

最新更新