跨域 iframe 調整器？
[英]cross-domain iframe resizer?
問題描述
我正在尋找一個很好的跨域 iframe 調整大小腳本，該腳本根據其內容調整其高度。 我也可以訪問 iframe 源的 html/css。 外面有嗎？
7 個解決方案
解決方案1
35 2011-08-04 11:23:55
如果您的用戶使用現代瀏覽器，您可以使用HTML5 中的 postMessage輕松解決這個問題。 這是一個運行良好的快速解決方案：
iframe 頁面：
<!DOCTYPE html>
<head>
</head>
<body onload="parent.postMessage(document.body.scrollHeight, 'http://target.domain.com');">
<h3>Got post?</h3>
<p>Lots of stuff here which will be inside the iframe.</p>
</body>
</html>
包含 iframe 的父頁面（並想知道其高度）：
<script type="text/javascript">
function resizeCrossDomainIframe(id, other_domain) {
var iframe = document.getElementById(id);
window.addEventListener('message', function(event) {
if (event.origin !== other_domain) return; // only accept messages from the specified domain
if (isNaN(event.data)) return; // only accept something which can be parsed as a number
var height = parseInt(event.data) + 32; // add some extra height to avoid scrollbar
iframe.height = height + "px";
}, false);
}
</script>
<iframe src='http://example.com/page_containing_iframe.html' id="my_iframe" onload="resizeCrossDomainIframe('my_iframe', 'http://example.com');">
</iframe>
解決方案2
15 2013-08-14 23:23:35
未能找到處理所有不同用例的解決方案，我最終編寫了一個簡單的 js lib，它支持寬度和高度，在一頁上調整內容大小和多個 iframe。
解決方案3
1 2012-05-25 18:33:17
此頁面上的第一個腳本 - 在 HTML5 中使用 postMessage 的腳本 - 也適用於移動設備上的 iframe - 通過將 iframe 調整為內容 - 例如聯合跨域 - 您可以輕松地在 iphone 或 android 中滾動，但方式並非如此否則可能使用 iframe
解決方案5
0 2014-02-09 01:56:33
我有一個完全不同的解決方案來跨域 iframe 調整大小。 它涉及獲取您將放入 iframe 的目標頁面的副本，在本地編寫它，然后將該副本放入您的 iframe 並根據對框架內 dom 的相同域訪問來調整大小。
一個例子如下：
<?php
if(isset($_GET['html'])) $blogpagehtml = file_get_contents(urldecode($_GET['html']));
else $blogpagehtml = file_get_contents('http://r****d.wordpress.com/');
$doc = new DOMDocument();
libxml_use_internal_errors(true);
$doc->loadHTML($blogpagehtml);
libxml_use_internal_errors(false);
$anchors = $doc->getElementsByTagName("a");
foreach($anchors as $anchor) {
$anchorlink=$anchor->getAttribute("href");
if(strpos($anchorlink,"http://r****d.wordpress")===false) $anchor->setAttribute("target","_top");
else $anchor->setAttribute("href","formatimportedblog.php?html=".urlencode($anchorlink));
}
$newblogpagehtml = $doc->saveHTML();
$token = rand(0,50);
file_put_contents('tempblog'.$token.'.html',$newblogpagehtml);
?>
<iframe id='iframe1' style='width:970px;margin:0 auto;' src='tempblog<?php echo $token; ?>.html' frameborder="0" scrolling="no" onLoad="autoResize('iframe1');" height="5600"></iframe>
解決方案6
0 2011-11-30 22:14:06
經過一些研究，我最終使用了包含在jQuery 插件中的 html5 消息傳遞機制，這使其與使用各種方法的舊瀏覽器兼容（本主題中描述了其中一些）。
最終的解決方案非常簡單。
在主機（父）頁面上：
// executes when a message is received from the iframe, to adjust
// the iframe's height
$.receiveMessage(
function( event ){
$( 'my_iframe' ).css({
height: event.data
});
});
// Please note this function could also verify event.origin and other security-related checks.
在 iframe 頁面上：
$(function(){
// Sends a message to the parent window to tell it the height of the
// iframe's body
var target = parent.postMessage ? parent : (parent.document.postMessage ? parent.document : undefined);
$.postMessage(
$('body').outerHeight( true ) + 'px',
'*',
target
);
});
我已經在 XP 和 W7 上的 Chrome 13+、Firefox 3.6+、IE7、8 和 9、OSX 和 W7 上的 safari 上測試過這個。 ;)
解決方案7
-2
以下代碼對我有用：
var iframe = document.getElementById(id);
iframe.height = iframe.contentDocument.body.scrollHeight;
在 Opera 11、IE 8 9、FF 8、Chrome 16 上測試
在跨域iFrame中更改樣式/ CSS（使用“ iFrame Resizer”）
[英]Change styling / CSS in Cross domain iFrame (using “iFrame Resizer”)
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.