问题标签 [iframe-resizer]

我正在寻找一个很好的跨域 iframe 大小调整脚本，它可以根据其内容调整其高度。我也可以访问 iframe 源的 html/css。外面有吗？

我使用以下库http://davidjbradshaw.github.io/iframe-resizer/可以在源页面之后调整跨站点 iFrame 的大小。

虽然我遇到了以下问题，但我无法解决：

1. 首次加载页面时，iFrame 的高度是正确的（整个加载的页面都在 iframe 中看到）。但是，当按下链接并转到另一个具有更大高度的站点时，第一个（在 iFrame 中）iFrame 不会改变，并且 iFrame 页面的底部也不会显示。这是怎么发生的，我该如何解决？

2. 与上述问题非常相似。我通过“bodyMargin”命令设置了边距。当第一个页面加载完成时它工作正常，但是当单击 iFrame 中网站上的链接时，“bodyMargin”中设置的边距会清除，并且网站会回到原来的状态。我该如何解决这个问题？

代码：

我在这里的iframe 测试页面中使用了@davidjbradshaw 出色的 iframe 调整大小。当我在桌面浏览器（经过测试的 Chrome、Safari 和 Firefox）中加载页面时，即使我将屏幕宽度保持得很小，它也能很好地加载和调整大小，所以我认为移动设备也会做出同样的反应。但他们没有。

当我在 iPhone 中查看页面时，没有修改宽度以使其适合。因此，它水平扩展了 iframe。

奇怪的是，如果我在我的 iPhone 上访问@davidjbradshaw 的示例页面，它们似乎工作得非常好，并且做了他们应该做的事情——调整宽度。也就是说，考虑到我正在使用引导程序等，他的示例并不复杂。但是，我的代码中也没有出现任何 JS 错误。

此外，直接在 iPhone 上访问 iframe 的源代码，它会正确加载、调整宽度和所有内容（因为它使用的是 twitter bootstrap 2.3.1）。

是的，我已经通过删除 head.js 片段，将iframeResizer.contentWindow.min.js脚本加载到标签之前的底部</body>和头部进行了测试。这些似乎都没有效果。

我有一个 Teamspeak 状态查看脚本，托管在与我的 wordpress 不同的域上。因此，我尝试使用 iframe 在 text/html 小部件中显示脚本结果，但它不会自动调整高度。Wordpress 是在共享主机上，所以这个脚本不会从那里与我的 teampeak 服务器通信。我找不到任何其他 ts3 查看器可以在自动隐藏空频道并且不完全丑陋的情况下工作。在做了一些研究之后，我发现了似乎是最新最好的解决方案，David J Bradshaw 的 iframe-resizer。现在我不是这方面的专家，也不完全理解我应该如何正确设置它。

目前我的 wordpress 小部件如下所示：

ts3.php 如下所示：

这就是我现在所拥有的。我希望有人可以帮助我正确安装/设置这个 iframe-resizer。

谢谢你。

我正在尝试使用https://github.com/davidjbradshaw/iframe-resizer iframe resizer 和示例（https://github.com/davidjbradshaw/iframe-resizer/tree/master/example）似乎是基于在 JQuery 上。有谁知道如何在不使用 JQuery 的情况下仅通过 JavaScript 调用它？它需要正文 onload 还是我捕获 iframe 的 onload 事件？我对如何开始使用它感到困惑（调用它）。

编辑...为每个问题添加更多详细信息。

1. 为什么？动态内容：我需要 iframe 根据 iframe 中“变化”的内容动态调整其高度。我已经尝试了多种解决方案，例如下面的解决方案，但它们并没有“完全”100% 地解决问题。他们仅根据 iframe 内容的“第一页”设置大小：

   /li>

2. 现有文档。/未弄清楚：我没有遵循 DavidBradshaw 提供的有关如何执行此操作的现有文档：我尝试按如下方式添加此代码。但显然，这不是你的做法。

该文件的主体是：

脚本部分：

同样在 iframe 中的被调用内容处，我有这行代码。不过，我很确定这部分是正确的。

在此先感谢您的帮助。如果我看起来很密集或这是一个愚蠢的问题，我深表歉意，但我看到了原型示例： iFrameResize([{options}],[selector]);

但是，您不需要“事件”来触发该功能吗？查看我的代码，我使用了 onload 事件，但它不起作用。如果我设置iframe的ID来建立一个[选择器]：

并称之为：

或这个：

它仍然不起作用。我没有任何选项，并希望将选项保留为默认值。

在这个页面http://test.atelier47.fr/iframe-resizer/example/我使用iframe resizer来自https://github.com/davidjbradshaw/iframe-resizer但高度没有设置，有问题吗？

I'm using the jQuery plugin: http://plugins.jquery.it/project/jquery-iframe-resizer

OK for resize between 2 different domains. My enablePublicMethods option is to true.

But i need to get the ID frame in my page contained. I the plugin example, it's ok but by a click:

Test on the 'parentIFrame' in window working just on the onclick event. When i try to get on the load, the parentIFrame is unknown:

How get the parentIFrame objet without click ??

我有一个由 iframe 加载的小部件。我可以更改内部内容的样式吗？

我使用以下插件尝试： https ://github.com/davidjbradshaw/iframe-resizer/tree/master/example

提前致谢..

我使用以下库http://davidjbradshaw.github.io/iframe-resizer/可以在源页面之后调整跨站点 iFrame 的大小。

虽然我在移动设备上遇到了以下问题，但我无法解决：

首次加载页面时，iFrame 的高度是正确的（整个加载的页面都在 iframe 中看到）。但是，当按下高度小于上一页的链接时，无法调用“resizedCallback”函数。所以当前页面高度与上一页保持一致。而当前页面的高度与上一页相比太小了。这仅在移动设备上出现。

我有以下结构：

广告设置为在用户与广告交互时通过 parentIFrame.size() 方法调整父 iFrame 的大小。我已经设置了这部分并且工作正常——我可以看到 2 级 iframe 上的内联样式属性发生了变化。

现在，查看演示，我可以看到嵌套 iFrame 可以一起工作，并且可以通过嵌套级别适当地调整大小。我看到中级 iFrame 必须设置有 contentWindow 和 iFrameResize 文件。

鉴于我的 2 级 iframe 确实可以正常工作并正确调整大小，我假设 1 级和 2 级之间的通信正常工作，而我的问题位于 0 级和 1 级之间。我已经设置了一个简化的测试用例并故意iFrameResize 日志记录在级别 2 内关闭。

如果您查看控制台，您会在广告呈现时注意到以下内容：

然后，当您点击广告时，会出现以下内容：

您可以看到我正在记录级别 2 的事件以帮助对日志进行分段。调整 2 级 iFrame 大小的最后一部分，但随后 1 级 iFrame 观察到大小没有变化是我断开连接的地方。

0级有以下内容：

级别 1 有以下内容（我知道这很奇怪，但对于广告网络来说是必要的......这部分正在工作。我提供它是为了完整性）：

级别 2 具有 contentWindow 脚本和 parentIFrame.size() 调用。

提前感谢您的任何帮助！