是否有有效的跨域 iframe 高度自动调整器?
我尝试了一些解决方案但没有成功。我想知道是否有一个解决方案,最好有一个易于遵循的教程。
I tried a few solutions but wasn't successful. I'm wondering if there is a solution out there preferably with an easy-to-follow tutorial.
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(7)
您有三种选择:
1. 使用 iFrame-resizer
这是一个简单的库,用于根据内容调整 iFrame 的大小。它使用 PostMessage 和 MutationObserver API,并支持 IE8-10。它还为内容页面提供了选项,以请求包含的 iFrame 具有一定的大小,并且还可以在使用完毕后关闭 iFrame。
https://github.com/davidjbradshaw/iframe-resizer
2. 使用 Easy XDM (PostMessage + Flash 组合)
Easy XDM 使用一系列技巧来实现多个浏览器中不同窗口之间的跨域通信,并且有使用它来调整 iframe 大小的示例:
http://easyxdm.net/wp/2010/03/17/resize-iframe-based-on-content/
http://kinsey。 no/blog/index.php/2010/02/19/resizing-iframes-using-easyxdm/
Easy XDM 通过使用 PostMessage 以及基于 Flash 的解决方案作为旧版浏览器的后备方案。
另请参阅Stackoverflow 上的此帖子(还有其他帖子,这是一个常见问题)。此外,Facebook 似乎会使用类似的方法。
3. 通过服务器进行通信
另一种选择是将 iframe 高度发送到您的服务器,然后使用 JSONP 从父网页从该服务器进行轮询(或者如果可能,使用长轮询)。
You have three alternatives:
1. Use iFrame-resizer
This is a simple library for keeping iFrames sized to their content. It uses the PostMessage and MutationObserver APIs, with fall backs for IE8-10. It also has options for the content page to request the containing iFrame is a certain size and can also close the iFrame when your done with it.
https://github.com/davidjbradshaw/iframe-resizer
2. Use Easy XDM (PostMessage + Flash combo)
Easy XDM uses a collection of tricks for enabling cross-domain communication between different windows in a number of browsers, and there are examples for using it for iframe resizing:
http://easyxdm.net/wp/2010/03/17/resize-iframe-based-on-content/
http://kinsey.no/blog/index.php/2010/02/19/resizing-iframes-using-easyxdm/
Easy XDM works by using PostMessage on modern browsers and a Flash based solution as fallback for older browsers.
See also this thread on Stackoverflow (there are also others, this is a commonly asked question). Also, Facebook would seem to use a similar approach.
3. Communicate via a server
Another option would be to send the iframe height to your server and then poll from that server from the parent web page with JSONP (or use a long poll if possible).
我得到了根据 iframe 的内容动态设置 iframe 高度的解决方案。这适用于跨域内容。
要实现这一目标,需要遵循一些步骤。
假设您在“abc.com/page”网页中添加了 iframe
<代码>
接下来要在网页“abc.com/page”下绑定windows“message”事件
在 iframe 加载上,您必须使用“FrameHeight”消息向 iframe 窗口内容发送消息:
I got the solution for setting the height of the iframe dynamically based on it's content. This works for the cross domain content.
There are some steps to follow to achieve this.
Suppose you have added iframe in "abc.com/page" web page
<div>
<iframe id="IframeId" src="http://xyz.pqr/contactpage" style="width:100%;" onload="setIframeHeight(this)"></iframe>
</div>
Next you have to bind windows "message" event under web page "abc.com/page"
On iframe load you have to send message to iframe window content with "FrameHeight" message:
我所做的是比较 iframe 的滚动宽度,直到它改变大小,同时我逐渐设置 IFrame 高度。这对我来说效果很好。您可以根据需要调整增量。
What I did was compare the iframe scrollWidth until it changed size while i incrementally set the IFrame Height. And it worked fine for me. You can adjust the increment to whatever is desired.
我有一个脚本,可以将其内容放入 iframe 中。它还确保 iFrameResizer 存在(它将其作为脚本注入),然后进行大小调整。
我将在下面提供一个简化的示例。
然后,可以使用脚本将 iframe 内容注入到另一个页面/站点内的任何位置,如下所示:
iframe 内容将注入到您放置脚本标记的位置下方。
希望这对某人有帮助。
I have a script that drops in the iframe with it's content. It also makes sure that iFrameResizer exists (it injects it as a script) and then does the resizing.
I'll drop in a simplified example below.
Then the iframe content can be injected anywhere within another page/site by using the script like so:
The iframe content will be injected below wherever you place the script tag.
Hope this is helpful to someone. ????
我在工作中(使用 React)做一些事情时遇到了这个问题。基本上,我们有一些外部 html 内容,我们将它们保存到数据库的文档表中,然后在某些情况下当您位于文档数据集中时将其插入到页面上。
因此,给定
n
个内联,其中最多n
可以包含外部 html,我们需要设计一个系统,在内容完全加载后自动调整每个内联的 iframe 大小每个。在旋转了一会儿之后,我最终这样做了:message
事件侦听器,该侦听器检查我们将从发送者 iframe 设置的特定键。标记,该标记将等待 iframe 的
window.onload
触发。一旦触发,我们使用 postMessage 向父窗口发送一条消息,其中包含有关 iframe id、计算高度等的信息。MessageEvent
对象中传递的 iframe 的 DOMid
iframe
,只需根据传递的值设置高度iframepostMessage
。I ran into this issue while working on something at work (using React). Basically, we have some external html content that we save into our document table in the database and then insert onto the page under certain circumstances when you're in the Documents dataset.
So, given
n
inlines, of which up ton
could contain external html, we needed to devise a system to automatically resize the iframe of each inline once the content fully loaded in each. After spinning my wheels for a bit, this is how I ended up doing it:message
event listener in the index of our React app which checks for a a specific key that we will set from the sender iframe.<script>
tag that will wait for the iframe'swindow.onload
to fire. Once that fires, we usepostMessage
to send a message to the parent window with information about the iframe id, computed height, etc.id
of the iframe that we pass in theMessageEvent
objectiframe
, just set the height from the value that is passed from the iframepostMessage
.我找到了另一个用于 Web 开发的服务器端解决方案,使用 PHP 来获取 iframe 的大小。
首先是使用服务器脚本 PHP 通过内部函数进行外部调用:(就像带有但有 curl 和 dom 的
file_get_contents
)。在 div (
iframe_reserve
) 下显示函数调用生成的 html您需要使用简单的
echo curl_get_file_contents("location url iframe","activation proxy")
之后 使用 javascript 执行主体事件函数 onload 只需简单控制内容 div (iframe_reserve
) 即可获取页面 iframe 的高度,所以我使用了
divHeight = document.getElementById("iframe_reserve").clientHeight;
要获取我们将在屏蔽 div 容器 (iframe_reserve
) 后调用的外部页面的高度。之后我们加载 iframe 的合适高度即可。I found another server side solution for web dev using PHP to get the size of an iframe.
First is using server script PHP to an external call via internal function: (like a
file_get_contents
with but curl and dom).You need to display under the div (
iframe_reserve
) the html generated by the function call by using a simpleecho curl_get_file_contents("location url iframe","activation proxy")
After doing this a body event function onload with javascript take height of the page iframe just with a simple control of the content div (
iframe_reserve
)So I used
divHeight = document.getElementById("iframe_reserve").clientHeight;
to get height of the page external we are going to call after masked the div container (iframe_reserve
). After this we load the iframe with its good height that's all.这是一个替代实现。
基本上,如果您能够在其他域编辑页面,您可以放置属于您的服务器的另一个 iframe 页面将高度保存到 cookie 中。
更新时用间隔读取cookie,更新iframe的高度。仅此而已。
编辑:2019 年 12 月
上面的解决方案基本上使用 iframe 内的另一个 iframe 第三个 iframe 属于顶级页面域,您使用查询字符串调用此页面,该查询字符串将大小值保存到 cookie,外部页面以一定的间隔检查此查询。但这不是一个好的解决方案,因此您应该遵循以下解决方案:
在首页:
在这里您可以检查
m.origin
以查看它来自哪里。在框架页面中:
尽管如此,请不要忘记这不是那么安全的方式。为了使其安全,请使用您想要的值更新 * value (targetOrigin)。
请遵循文档:https://developer.mozilla.org/ en-US/docs/Web/API/Window/postMessage
Here is an alternative implementation.
Basically if you able to edit page at other domain you can place another iframe page that belongs to your server which saving height to cookies.
With an interval read cookies when it is updated, update the height of the iframe. That is all.
Edit: 2019 December
The solution above basically uses another iframe inside of an iframe 3rd iframe is belongs to the top page domain, which you call this page with a query string that saves size value to a cookie, outer page checks this query with some interval. But it is not a good solution so you should follow this one:
In Top page :
Here you can check
m.origin
to see where is it comes from.In frame page:
Although, please don't forget this is not so secure way. To make it secure update * value (targetOrigin) with your desired value.
Please follow documentation: https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage