问题标签 [iframe-resizer]

我想知道我是否可以通过 iframe 中的链接定向 (Src) 引用特定标签（在我们的示例 H1 中）。

例如链接http://www.marketwatch.com/story/what-the-fed-raising-rates-would-mean-for-your-credit-cards-and-bank-accounts-2016-12-14

我想知道我是否可以参考下面链接中的第一个 H1（“美联储加息将如何影响数百万美国人”）主要目标是直接查看文章。

• “参考 h1 标签”是什么意思？我的意思是我想将 iframe 向下滚动到该元素。
• 这个想法是直接到一个特定的 TAG (H1ׂ) 没有 ID 或 CLASS （在所有世界网站上的所有文章都只有一个 H1）。

我正在使用Iframe Resizer，但我的代码无法跨域工作。当两个域相同时，它工作正常。你能帮我吗？这很奇怪，因为 iframe 肯定加载了 iFrameResizer.contentWindow.js 并且我使用了 checkOrigin: false 所以它应该允许跨域......

以下是我在加载具有 iframe 的父页面时在控制台中遇到的错误：

Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('http://jacobjohnson.net') does not match the recipient window's origin ('http://designtesting.cfs.local').

iframeResizer.min.js:8 [iFrameSizer][Host page: display_frame] No response from iFrame. Check iFrameResizer.contentWindow.js has been loaded in iFrame

我的 iframe-resizer 运行良好，除了我无法从 iframe 内容中确定视口宽度/高度。我发现我可以打电话parentIFrame.getPageInfo(callback)，但我回来的对象是这样的：

我期望clientWidth并clientHeight成为窗口视口的宽度/高度。clientWidth看起来正确，但clientHeight看起来像iframeHeight + offsetTop + 1px，而我的浏览器窗口的高度约为 1000 像素。我误解了 clientWidth/clientHeight 的含义还是我做错了什么？

当有人访问我的 WordPress 网站中的特定页面时，我想在其上显示另一个网站的全屏 iframe。它必须完全覆盖我的网页，所以看起来好像用户现在在另一个网站上（网址仍然是我的）。

我怎样才能做到这一点？可能有一个插件吗？

PS 我知道如何编码，但我从未在WordPress上开发过任何东西。请具体:)

编辑：尝试将 iframe 放在 header.php 上：

我已经在我的网站 ( http://www.healthfitchiro.com/alternate-login ) 上安装了 iframe-resizer，它主要按预期工作，除了：1) 它似乎在任何容量的移动设备上都不起作用。2）当您单击 iframe 内的某个位置时，页面的长度会增加。每次点击都会使其进一步增长，并且不会收缩。这是我的页面代码：

我的问题：为什么会出现这种增长现象？在移动设备上查看时，如何使其正常工作？由于我将在 iframe 内导航，我是否需要iframeResizer.contentWindow.min.js在将导航到的每个页面上包含或仅在加载的第一页上包含？另外，我想这并不重要，但是当我尝试使用 jQuery 方法时它不起作用：$('#lcembed').iFrameResize(); 它不会调整大小并且 iFrame 高度似乎只有几个像素高。只有iFrameResize();它自己才能发挥作用。为什么会这样？

我正在使用 iframe-resizer 将一个页面的内容重新调整到另一个页面中。我让它在桌面浏览器查看时运行良好，但在我的真实演示中无法让我的 iframe 在移动设备上调整大小。我也在另一台服务器上进行了测试，为另一个真实世界的演示使用了不同的页面设计。两者都没有调整大小。我正在 iOS Safari 和 Chrome 中进行测试。我设置了一个简单的测试用例，它按照预期的方式工作，与我的两个演示页面不同。显然，演示父页面的源代码中的某些内容阻止了预期的功能。有人可以帮我找出是什么阻止这些演示页面在移动设备中正确调整大小吗？我想如果两个随机站点测试这个问题，很可能我的客户安装这个小部件也会经常遇到这个问题，我需要能够提供补救措施。

测试用例（好）：http ://healthfitchiro.com/wp-content/iframe.html

现实演示（坏）：http ://healthfitchiro.com/alternate-login

我已经尝试过这里提到的各种方法来让 iframe 改变高度。它适用于原始 src 域的初始加载，但是当在 iframe 内单击指向子域 s 的链接时，我收到以下错误：

Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('https://www.profiledata.co.za') does not match the recipient window's origin ('https://funds.profiledata.co.za').

URL：https ://www.iol.co.za/business-report/market-indicators 点击 Funds 获取子域。

我已经尝试将 checkOrigin 设置为 false 以及其中包含两个域的数组，但我仍然遇到相同的错误。它不会调整子域页面上的 iframe 的大小。任何想法，谢谢。

我有一个包含动态内容的 iframe，需要在页面上显示，我希望它尽快显示。但是，加载 iframe 的内容与在主机页面上调整 iframe 的大小之间似乎存在一些滞后。目前，iframe 的初始尺寸为 height = 0 和 width = 100%，因此当 iframe 中加载内容时，iframe-resizer 会自动将其调整为正确的高度。

但是，我注意到如果 iframe 中有自动播放视频，我可以在 iframe 调整大小之前听到音频长达一分钟。检查浏览器控制台时，我会看到 iframe-resizer 无响应的警告消息，但大约一分钟后，iframe 将调整大小并显示内容。

我在 iframe 内容中有一个谷歌分析跟踪代码，并注意到如果我删除它，iframe-resizer 的响应速度会更快，内容加载速度也会更快。如何让 iframe 响应其中运行的谷歌分析跟踪代码？如何在 GA 脚本完成加载之前让 iframe-resizer 工作？

此外，是否将初始 iframe 高度设置为 0，然后允许 iframe-resizer 以正确的方式调整框架大小以初始加载动态 iframe 内容？

编辑（添加代码）：这是我在主机页面上运行的代码

如果您想查看整个过程，可以查看此jsfiddle

目前，我有相同的代码在 initCallback 和 resizedCallback 中隐藏加载 gif，因为 gif 并不总是被 initCallback 隐藏。

我已经尝试了所有的故障排除建议，并且iFrameResizer在其他站点上工作没有任何问题，但是它在这个站点上遇到了问题，我无法理解为什么。奇怪的是，它适用于详细信息页面，但不适用于列表页面。日志记录返回

“在 5 秒内没有响应”消息。

我也尝试了所有不同的触发器（'max'等），它们都没有任何作用。

它不起作用的示例页面：http: //www.homesinfocus.co.uk/properties-to-let/

但在详细信息页面上，它确实有效： http: //www.homesinfocus.co.uk/property-details-let/?ID=790 &LB=Let

我已经确保所有 iFrame 都有唯一的 ID，并且列表页面适用于其他网站，只是看不出这个问题出在哪里。

任何指针将不胜感激。

我正在尝试在下面的页面上包含多个具有不同来源的高度调整 iFrame：

https://succeed.serenova.com/lp-cloud-contact-center/

iFrame Resizer 工作的唯一实例是在第一个灯箱上，它通过“获取我的免费现场演示”按钮和其他几个按钮进行实例化。

连接到“问题？”的灯箱 iFrame 和“下载 Gartner 报告”按钮不起作用，尽管以完全相同的方式实现。

这是调整大小之前的第一个灯箱：

调整大小之前的第一个 iFrame

成功调整大小后：

成功调整大小后的第一个 iFrame

而之前的第二个：

尝试调整大小之前的第二个 iFrame

调整大小失败后：

调整大小失败后的第二个 iFrame

测试步骤：

1. 转到https://succeed.serenova.com/lp-cloud-contact-center/
2. 单击第一个“获取我的免费现场演示”按钮
3. 单击表单提交按钮“获取我的免费实时演示”并注意 iframe 会按应有的方式进行调整
4. 关闭模态
5. 向下滚动，直到看到“问题？”按钮 并点击它
6. 点击表单上的“提交”并注意 iFrame resizer 不会更新 iFrame 大小

或者，自行复制：

1. 在页面上创建 iFrame 调整大小的工作实例（最好包含来自不同域的内容）
2. 创建 iFrame 的第二个实例（具有不同的源）以在同一页面上调整大小
3. 测试 iFrame 的第二个实例是否根据内容更改调整大小

提前感谢您的帮助！