コンテンツに基づいて高さを調整する、優れたクロスドメイン iframe のサイズ変更スクリプトを探しています。iframe のソースの html/css にもアクセスできます。そこに何かありますか？
34047 次
7 に答える
35
ユーザーが最新のブラウザを使用している場合、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>
于 2011-08-04T11:23:55.647 に答える
15
このためのさまざまなユースケースすべてに対処するソリューションを見つけることができなかったので、幅と高さの両方をサポートし、1 つのページでコンテンツと複数の iframe のサイズを変更する単純な js ライブラリを作成することになりました。
于 2013-08-14T23:23:35.203 に答える
1
このページの最初のスクリプト (HTML5 で postMessage を使用するスクリプト) は、モバイルの iframe でも機能します - iframe をコンテンツに合わせてサイズ変更することにより (たとえば、クロスドメインのシンジケート)、iPhone や Android では、そうではない方法で簡単にスクロールできます。それ以外の場合は iframe で可能
于 2012-05-25T18:33:17.127 に答える
0
クロスドメインの 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>
于 2014-02-09T01:56:33.740 に答える
0
いくつかの調査の後、さまざまな方法を使用して古いブラウザーと互換性を持たせる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
);
});
Chrome 13 以降、Firefox 3.6 以降、XP および W7 の IE7、8、および 9、OSX および W7 のサファリでこれをテストしました。;)
于 2011-11-30T22:14:06.680 に答える
-2
次のコードは私のために働いた：
var iframe = document.getElementById(id);
iframe.height = iframe.contentDocument.body.scrollHeight;
Opera 11、IE 8 9、FF 8、Chrome 16 でテスト済み
于 2011-12-19T18:13:26.980 に答える