当前位置：文江博客话题详情

尝试动态调整指向本地 PHP 页面的 iframe 的高度

发布于 2025-01-04 15:49:55 字数 284 浏览 1 评论 0原文

我已经阅读了大量的帖子和文章，但没有找到专门解决我的问题的修复程序

我的父页面通过 iframe 指向本地子页面。

子页面是一个 php 调查，当用户单击下一个按钮时，它会更改页面的高度。（并不是真正更改页面，而是在一个 .php 文件中重新填充内容）

我试图让父页面根据子页面的长度自动扩展和接触高度。

我有这个特定的需求，因为我在 WordPress 中工作，并且希望将 PHP 应用程序（调查）包含在 WordPress 主题的设计中。

如果有帮助，我们将不胜感激！

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

铁憨憨 2025-01-11 15:49:55

这两个页面是否在同一个域中？如果是，那么实现此目的的最简单方法是在父页面和子页面上运行 JavaScript。

这是它如何工作的粗略想法。在子页面上：

...
<script>
  function resizeFrame() {
    // Call out to the parent iframe.
    window.parent.resizeChild(document.body.clientHeight);
 }
</script>
...
<body onload="resizeFrame()">
...

在父页面上：

<script>
  function resizeChild(height) {
    // Add the ID of the iframe element below.
    document.getElementById(...).style.height = height + 'px';
  }
</script>

您可能需要调整高度，具体取决于 iframe 元素的边距/边框等。

如果这两个页面位于不同的域中，这将会困难得多。 iframe 之间的跨域通信很困难，特别是如果您想支持旧版浏览器。

Are the two pages on the same domain? If yes, then the easiest way to achieve this is with JavaScript running on both the parent and the child page.

Here's a rough idea of how it might work. On the child page:

...
<script>
  function resizeFrame() {
    // Call out to the parent iframe.
    window.parent.resizeChild(document.body.clientHeight);
 }
</script>
...
<body onload="resizeFrame()">
...

On the parent page:

<script>
  function resizeChild(height) {
    // Add the ID of the iframe element below.
    document.getElementById(...).style.height = height + 'px';
  }
</script>

You'll probably need to adjust the height, depending on the margins/borders/etc of the iframe element.

If the two pages are on different domains, this will be much harder. Cross-domain communication between iframes is difficult, particularly if you want to support older browsers.

回复收藏 0 原文

~没有更多了~