javascript jquery iframe 跨域动态高度

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/7437628/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-26 00:07:53  来源:igfitidea点击:

Jquery iframe crossdomain dynamic height

javascriptjqueryiframedynamicheight

提问by Writecoder

Is this even possible with jquery only with no bulky plugins?

仅在没有庞大插件的情况下使用 jquery 甚至可以做到这一点吗?

I know there are lots of plugins and alternatives, i'm searching for the shortest, robustest & most cleanest (preferably relying on jquery)

我知道有很多插件和替代品,我正在寻找最短、最健壮和最干净的(最好依赖于 jquery)

Here basic jsfiddle to tryout your thoughts: http://jsfiddle.net/3vPJd/

这里是基本的 jsfiddle 来尝试你的想法:http: //jsfiddle.net/3vPJd/

回答by Kevin B

I have to go with "This is not possible" due to the fact that the parent page cannot get the height of the 3rd party page since it is from a different domain than the parent page.

由于父页面无法获得第 3 方页面的高度,因为它来自与父页面不同的域,因此我必须使用“这是不可能的”。

Edit: It is possible to do this if you have some control of the 3rd party page.

编辑:如果您对 3rd 方页面有一定的控制权,则可以执行此操作。

I personally would just use the method they already have implemented, it doesn't require jQuery, you just have to include the frame.js.

我个人只会使用他们已经实现的方法,它不需要 jQuery,你只需要包含frame.js

At that point, all you need is a method on the parent page that listens for when the hash changes and resizes the iframe accordingly, which is also already written by the site you linked. it is a very clean solution already, no real need to modify it. It can be found here.

那时,您需要的只是父页面上的一个方法,用于侦听哈希何时更改并相应地调整 iframe 的大小,该方法也已由您链接的站点编写。它已经是一个非常干净的解决方案,实际上不需要修改它。可以在这里找到。

回答by David Bradshaw

This little library will do what you want. It uses postMessageto talk between the iFrame and the parent, so works cross domain. It also uses MutationObserverand EventListenersto detect changes to the content and keep the iFrame correctly sized.

这个小图书馆会做你想做的。它用于postMessage在 iFrame 和父级之间进行通信,因此可以跨域工作。它还使用MutationObserverEventListeners检测对内容的更改并保持 iFrame 的大小正确。

https://github.com/davidjbradshaw/iframe-resizer

https://github.com/davidjbradshaw/iframe-resizer