问题标签 [iframe-resizer]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
1 回答
130 浏览

iframe - documentElementScroll iframe 调整大小使用先前调整大小的高度

我使用 davidjbradshaw/iframe-resizer 调整 iframe 的大小,CORS 一切正常,但我面临一个问题,当我从全屏调整窗口大小时,iframe 高度会得到不同的内容高度,这没关系,但是当我返回全屏时“ heightCalculationMethod: 'documentElementScroll'", 文档内容滚动高度使用前一个窗口的高度,其中内容具有更大的高度并创建一个空间,该空间是 iframe 的一部分,例如。iframe 高度为 900px,但 iframe 内容高度为 800px,这是我想要的响应!

提前致谢!

0 投票
1 回答
846 浏览

javascript - Jest spyon 在“require”模拟模块时有效,而在“import”时无效

我想测试我的第三方库(iframe-resizer)函数是否被调用。我的测试

所以调用了iframeResizer函数,通过console.log进行了测试。这里奇怪的是我使用的时候

间谍不起作用(测试失败)

但是当我使用

一切正常(测试通过)。我是 jest 和 node 模块的新手,所以我可能错过了一些明显的东西吗?

0 投票
1 回答
104 浏览

javascript - 提交内容较长的 iframe 表单时,感谢消息不可见,需要向上滚动父级才能看到

我在这个演示页面(跨域)上放置了一个表单(我托管)。我可以在父母和孩子上添加代码。

iframe 自动调整大小工作完美(使用iframe-resizer),但是当在移动设备或桌面上提交表单时,窗口很窄(滚动条更长),感谢消息不会立即可见。您需要向上滚动父页面才能看到它,这可能会引起人们的困惑。

iframe 完美地缩小到合适的大小,但不知何故需要做一个自定义 postMessage 来告诉父级滚动/跳转他们的页面到嵌入式 iframe 的顶部。

关于如何使用已经存在的 iframe-resizer 脚本的任何想法,或者我可以在没有它的情况下只做一个 postMessage,如果是的话如何?

先感谢您!

0 投票
0 回答
555 浏览

iframe-resizer - iFrame Resizer 在图像加载之前设置了不正确的高度

我正在使用@DavidJBradshaw 的 iFrame Resizer 并遇到了一个我似乎无法找到答案的问题。

iFrame Resizer 似乎在加载图像之前设置了 iframe 高度,而当图像最终加载时,iframe 太短了。任何单击或调整窗口大小都会立即触发 iFrame Resizer 设置正确的高度。

问题似乎仅在第一次将新页面(来自同一域)加载到 iFrame 时出现。在本地测试我的网站时一切正常,当浏览器缓存所有文件时它也可以正常工作,因此返回到第一个视图大小不正确的页面可以正常工作。

以下是 iframe 标签:

这是我在包含 iframe 的页面末尾的内容:

这是我在 iframe html 末尾的内容:

0 投票
1 回答
727 浏览

tableau-api - 从 Tableau Public 嵌入的 Tableau 无法在 iFrame 中自动调整大小

我正在与一个组织合作构建一个网站,该网站将显示来自 Tableau Public 的表格嵌入,但我遇到了表格显示方式的问题。我已经尝试关注 Tableau 网站上提供的一些资源,例如确保仪表板设置为自动调整大小等......

该网站是一个 wordpress 网站,它的编写方式是,每当检测到来自 Tableau Public 的画面嵌入代码时,它都会自动将其放入 iFrame 中。在 Tableau Public 中,我使用了两个可用嵌入代码中较长的一个。

我已确保画面的仪表板设置为“自动”大小,因此它应该自动调整到屏幕。这似乎不起作用,并且画面嵌入太大。

我在关于 tableau 的资源指南中发现的一件事是,如果您的网站以 !doctype html 开头,那么在嵌入中使用以下代码:

我应该把它放在嵌入代码中,还是因为它被放在 iFrame 中所以没关系?如果我应该使用它,它应该放在代码的哪里?

放置tableau的网站上的iFrame代码是:

这个想法是,每当我或其他用户嵌入 Tableau 代码时,上面的代码都会自动检测嵌入并将其放置在此 iFrame 中。

是否应该更改上述代码的内容?

我希望画面能够正确地适合正在显示的屏幕。用户不必缩小或滚动来查看/与图表交互。

感谢您的帮助,我很乐意澄清以上任何内容/提供更多信息。

谢谢。

0 投票
2 回答
5215 浏览

javascript - 将 iFrame Resizer 与 React JS 页面用作内容

我在外部 CMS 页面上有我的 React 页面的 iFrame,但我希望自动调整高度。

我正在尝试使用这个库:https ://github.com/davidjbradshaw/iframe-resizer 但不幸的是我无法正确实现它......我不知道我的 React 项目中是否以及在哪里需要设置某些参数/调用函数以及我应该在哪里导入这个 JS 文件。

我已经尝试按照此处的说明和某些在线教程: https ://github.com/davidjbradshaw/iframe-resizer

但这始终只是如何在主机页面上实现它。

我已经在主机页面中包含了脚本:

现在根据我的理解,我需要根据我在文档中阅读的内容在我的 React 项目中的某处调用 iFrameResizerContentWindow,但我不太确定这样做的正确方法是什么,现在文档让我有点困惑。因此,如果有人可以帮助我,将不胜感激!

0 投票
1 回答
73 浏览

html - 有没有在不向父页面添加任何代码的情况下使 iFrame 响应?

我正在制作一个将驻留在 iFrame 内的页面。下面是我的代码。它需要响应,我的就是。但是,iFrame 不是。我无权访问父页面或托管页面以实施我所建议的解决方案。有没有办法在不添加父代码的情况下使 iFrame 响应?

对我来说,这似乎是最合乎逻辑的答案(如果我可以访问父源代码) - http://davidjbradshaw.github.io/iframe-resizer/。但是,我不知道,所以我想知道在我的代码中是否有办法在 .

0 投票
1 回答
1894 浏览

javascript - iFrameResize 未定义 - 通过 CDN 和 JS 文件加载

我正在尝试使用iFrame Resizer根据其内容(可以更改)在同一域上调整 iFrame 的大小。

现场示例:https ://bronzecc.co.uk/sunday-2nd-xi/

我收到一个Uncaught ReferenceError: iFrameResize is not defined错误,但我检查了 iFrame,它们都通过 CDN 加载了正确的 JS,我还在该页面本身上加载了正确的 JS。

为了初始化我正在使用的调整器

MCE:https ://gist.github.com/shivampaw/7b1dba5326706673a782d115358eca2a

window.html

iframe.html

无法弄清楚为什么它不起作用。

0 投票
1 回答
54 浏览

iframe - IFrame 未检测到 CSS

我正在使用 David J. Bradshaw 的 iFrame Resizer。

将 css 样式从父级加载到 IFrame。在加载 IFrame 中的 css 样式之前显示的父级 IFrame 的高度。

在父母

在 IFrame 中

没有错误,但是在加载 IFrame 中的 css 样式后,我需要父显示中的 IFrame 高度。请帮忙?

0 投票
1 回答
357 浏览

jquery - 重定向到其他页面时出现 iFrameResizer 问题

我正在将iframe-resizer用于跨域应用程序,Iframe 在应用程序内加载良好,但是当我单击一个重定向到 Iframe 应用程序上其他 URL 的按钮时,它给了我错误:

无法在“DOMWindow”上执行“postMessage”:提供的目标原点 () 与接收窗口的原点 () 不匹配。

我已经给出了 Iframe 的 src ,例如https://example.com,现在 example.com 上的主页加载正常,但是当我重定向到其他页面时,其 URL 像https://example.com/product/details然后在上面错误来了。

我已经升级到 4.1 版本的库并且问题已解决,但它仍然在控制台上显示错误。现在我面临重定向后无法在页面内获取父应用程序 URI 的问题。

我正在使用 document.referrer 来获取它,它在 iframe 的主页上运行良好,但在重定向后的其他页面上却不行,我还面临移动设备上重定向页面的高度问题,它显示出很长的空白空间,原因都是孩子页面正在选择 iframe 主页的高度,而不是调整高度。

这两个应用程序都托管在 IIS 上,并且在我们的控制之下。任何帮助/建议将不胜感激。