Question

我有一个带有页眉和页脚的网站。我们称之为domain.com。

现在在第二个域上我有2个文件：

page1.php，高度为1500px
page2.php，高度为 800像素

现在我想在我的domain.com上添加两个页面（不是同时，但使用例如domain.com/1和domain.com/2），其中iframe显示完整页面内容（重要：page1.php和page2.php）并在页眉和页脚之间添加。

iFrame应该没有滚动条，应该寻找没有iFrame的用户。

如何制作显示整页（page1.php或page2.php）的动态iFrame，还可以根据页面内容自动设置大小（因为page1.php大于page2.php）？

//编辑：我忘了输入重要的东西。我想添加为iFrame的网站是一个商店网站，因此是动态的。网站没有固定的高度。所以我不能在高度上使用px因为a）显示得太少（其余部分将被“剪掉”）或显示太多（其余部分将只是白色）。我希望你明白我的意思。

Answer 1

使用<iframe>显示内容有点过时，但如果您想做什么，请查看以下演示：

Demo

基本上，您只需要确保scrolling和frameborder属性已正确关闭：

<iframe src="https://xhynk.com/" scrolling="no" frameborder="none"></iframe>

有助于将CSS设置为以下内容：

iframe {
    display: block;
    width: 100vw;
    height: 400px;
}

display: block从iframe中删除任何内联边距（通常为4px）

width: 100vw会将其设置为您的视口宽度（但如果您的侧边栏或父容器不像视口那么宽，则使用100%

并将height设置为内容的像素大小。

因此，您的 domain.com/1 页面将如下所示：

<header>Page 1</header>
<iframe src="page1.php" scrolling="no" frameborder="none" style="display: block; width: 100vw; height: 1500px;"></iframe>
<footer>&copy; Jelly</footer>

domain.com/2 类似于：

<header>Page 2</header>
<iframe src="page2.php" scrolling="no" frameborder="none" style="display: block; width: 100vw; height: 800px;"></iframe>
<footer>&copy; Jelly</footer>

您可以阅读：<iframe> Element Documentation了解更多信息。

对于动态高度，只有在您不担心跨域问题时才能执行此操作，但您可以在加载后修改窗口的高度：

将onload属性添加到您的iframe ：

<iframe id="iframe1" src="page2.php" scrolling="no" frameborder="none" onload="iframeResize()"></iframe>

<强>的JavaScript

function iframeResize() {
    var iframe = document.getElementById('iframe1');
    iframe.height = iframe.contentWindow.document.body.scrollHeight + "px";
}

动态和100％iframe

1 个答案: