获取跨域iframe高度 - 是否有跨域的iframe高度自动调整大小工作?
react iframe自适应高度 (4)
我尝试了一些解决方案,但没有成功。 我想知道是否有一个解决方案,最好有一个易于遵循的教程。
你有三种选择:
1.使用iFrame调整器
这是一个简单的库,用于保持iFrame大小适合其内容。 它使用PostMessage和MutationObserver API,并支持IE8-10。 它还具有用于内容页面的选项,以请求包含的iFrame具有特定的大小,并且在完成它时也可以关闭iFrame。
http://davidjbradshaw.github.io/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的解决方案作为旧版浏览器的后备工作。
另请参阅上的此线程 (还有其他人,这是一个常见问题)。 另外, Facebook似乎也会采用类似的方法 。
3.通过服务器进行通信
另一个选择是将iframe高度发送到服务器,然后使用JSONP从父级网页中从该服务器进行轮询(如果可能,则使用长轮询)。
我发现了另一个使用PHP获取iframe大小的web dev的服务器端解决方案。
首先是通过内部函数将服务器脚本PHP用于外部调用:(如带有curl和dom的file_get_contents
)。
function curl_get_file_contents($url,$proxyActivation=false) {
global $proxy;
$c = curl_init();
curl_setopt($c, CURLOPT_RETURNTRANSFER, 1);
curl_setopt($c, CURLOPT_USERAGENT, "Mozilla/5.0 (Windows; U; Windows NT 5.2; en-US; rv:1.8.1.7) Gecko/20070914 Firefox/2.0.0.7");
curl_setopt($c, CURLOPT_REFERER, $url);
curl_setopt($c, CURLOPT_URL, $url);
curl_setopt($c, CURLOPT_FOLLOWLOCATION, 1);
if($proxyActivation) {
curl_setopt($c, CURLOPT_PROXY, $proxy);
}
$contents = curl_exec($c);
curl_close($c);
$dom = new DOMDocument();
$dom->preserveWhiteSpace = false;
@$dom->loadHTML($contents);
$form = $dom->getElementsByTagName("body")->item(0);
if ($contents) //si on a du contenu
return $dom->saveHTML();
else
return FALSE;
}
$url = "http://www.google.com"; //Exernal url test to iframe
<html>
<head>
<script type="text/javascript">
</script>
<style type="text/css">
#iframe_reserve {
width: 560px;
height: 228px
}
</style>
</head>
<body>
<div id="iframe_reserve"><?php echo curl_get_file_contents($url); ?></div>
<iframe id="myiframe" src="http://www.google.com" scrolling="no" marginwidth="0" marginheight="0" frameborder="0" style="overflow:none; width:100%; display:none"></iframe>
<script type="text/javascript">
window.onload = function(){
document.getElementById("iframe_reserve").style.display = "block";
var divHeight = document.getElementById("iframe_reserve").clientHeight;
document.getElementById("iframe_reserve").style.display = "none";
document.getElementById("myiframe").style.display = "block";
document.getElementById("myiframe").style.height = divHeight;
alert(divHeight);
};
</script>
</body>
</html>
您需要在div( iframe_reserve
)下使用简单的echo curl_get_file_contents("location url iframe","activation proxy")
显示函数调用生成的html。
这样做后,一个身体事件函数onload用JavaScript获取页面iframe的高度,只需简单控制内容div( iframe_reserve
)
所以我用divHeight = document.getElementById("iframe_reserve").clientHeight;
在屏蔽div容器( iframe_reserve
)之后获取外部页面的高度。 在此之后,我们加载iframe,其高度恰到好处。
我所做的是比较iframe scrollWidth,直到它改变大小,而我增量设置IFrame高度。 它对我来说工作得很好。 您可以根据需要调整增量。
<script type="text/javascript">
function AdjustIFrame(id) {
var frame = document.getElementById(id);
var maxW = frame.scrollWidth;
var minW = maxW;
var FrameH = 100; //IFrame starting height
frame.style.height = FrameH + "px"
while (minW == maxW) {
FrameH = FrameH + 100; //Increment
frame.style.height = FrameH + "px";
minW = frame.scrollWidth;
}
}
</script>
<iframe id="RefFrame" onload="AdjustIFrame('RefFrame');" class="RefFrame"
src="http://www.YourUrl.com"></iframe>
我有一个脚本在内容中放入iframe中。 它还确保iFrameResizer存在(它将其注入为脚本),然后进行大小调整。
我将在下面简单介绍一下。
// /js/embed-iframe-content.js
(function(){
// Note the id, we need to set this correctly on the script tag responsible for
// requesting this file.
var me = document.getElementById('my-iframe-content-loader-script-tag');
function loadIFrame() {
var ifrm = document.createElement('iframe');
ifrm.id = 'my-iframe-identifier';
ifrm.setAttribute('src', 'http://www.google.com');
ifrm.style.width = '100%';
ifrm.style.border = 0;
// we initially hide the iframe to avoid seeing the iframe resizing
ifrm.style.opacity = 0;
ifrm.onload = function () {
// this will resize our iframe
iFrameResize({ log: true }, '#my-iframe-identifier');
// make our iframe visible
ifrm.style.opacity = 1;
};
me.insertAdjacentElement('afterend', ifrm);
}
if (!window.iFrameResize) {
// We first need to ensure we inject the js required to resize our iframe.
var resizerScriptTag = document.createElement('script');
resizerScriptTag.type = 'text/javascript';
// IMPORTANT: insert the script tag before attaching the onload and setting the src.
me.insertAdjacentElement('afterend', ifrm);
// IMPORTANT: attach the onload before setting the src.
resizerScriptTag.onload = loadIFrame;
// This a CDN resource to get the iFrameResizer code.
// NOTE: You must have the below "coupled" script hosted by the content that
// is loaded within the iframe:
// https://unpkg.com/[email protected]/js/iframeResizer.contentWindow.min.js
resizerScriptTag.src = 'https://unpkg.com/[email protected]/js/iframeResizer.min.js';
} else {
// Cool, the iFrameResizer exists so we can just load our iframe.
loadIFrame();
}
}())
然后,iframe内容可以通过使用如下脚本被注入到另一个页面/站点中的任何地方:
<script
id="my-iframe-content-loader-script-tag"
type="text/javascript"
src="/js/embed-iframe-content.js"
></script>
无论您放置脚本标记的位置如何,iframe内容都将被注入。
希望这对某人有帮助。 👍