Iframeの高さパラメーターを、iframe内にロードされるページの同じpxに変更しようとしています。 iframeに読み込まれているページは、別のドメインから来ています。
Iframe内に異なるページが読み込まれ、iframeコンテンツの高さが変更されるため、iframeコンテンツの高さを取得して、iframe heightパラメーターに適用する必要があります。
ここで私が話していることの例: http://jsfiddle.net/R7Yz9/3/
<div class="site"><a href="http://Amazon.com/" target="_top">Amazon </a></div>
<div class="site"><a href="http://cnn.com/" target="_top">Cnn </a></div>
<div class="site"><a href="http://wikipedia.org/" target="_top">Wikipedia </a></div>
<iframe id="source" src="http://Amazon.com/" frameborder="0" scrolling="no" width="100%" height="100%"></iframe>
。
$(document).ready(function() {
var iframe = $( "#source" );
$( "a[target=_top]" ).click( function(){
iframe.attr( "src", this.href );
return false;
});
});
IFrameをコンテンツに合わせてサイズ変更する際のすべての問題を解決する小さなライブラリを次に示します。
https://github.com/davidjbradshaw/iframe-resizer
ポストメッセージAPIを使用してクロスドメインの問題を処理し、いくつかの異なる方法でiFrameのコンテンツの変更を検出します。
最新のすべてのブラウザーとIE8以上で動作します。
EDIT:クロスドメインのiframeの高さを決定するには、iframeのページにスクリプトを実装するためのアクセス権も必要です。
フィットした単一のiframeをページに埋め込むために使用した最小クロスドメインセット。
ページの埋め込み(iframeを含む):
<iframe frameborder="0" id="sizetracker" src="http://www.hurtta.com/Services/SizeTracker/DE" width="100%"></iframe>
<script type="text/javascript">
// Create browser compatible event handler.
var eventMethod = window.addEventListener ? "addEventListener" : "attachEvent";
var eventer = window[eventMethod];
var messageEvent = eventMethod == "attachEvent" ? "onmessage" : "message";
// Listen for a message from the iframe.
eventer(messageEvent, function(e) {
if (isNaN(e.data)) return;
// replace #sizetracker with what ever what ever iframe id you need
document.getElementById('sizetracker').style.height = e.data + 'px';
}, false);
</script>
埋め込みページ(iframe):
<script type="text/javascript">
function sendHeight()
{
if(parent.postMessage)
{
// replace #wrapper with element that contains
// actual page content
var height= document.getElementById('wrapper').offsetHeight;
parent.postMessage(height, '*');
}
}
// Create browser compatible event handler.
var eventMethod = window.addEventListener ? "addEventListener" : "attachEvent";
var eventer = window[eventMethod];
var messageEvent = eventMethod == "attachEvent" ? "onmessage" : "message";
// Listen for a message from the iframe.
eventer(messageEvent, function(e) {
if (isNaN(e.data)) return;
sendHeight();
},
false);
</script>
Iframeを作成するサイトにもアクセスできる必要があります。私はここで最良の解決策を見つけました: https://Gist.github.com/MateuszFlisikowski/91ff99551dcd90971377
yourotherdomain.html
<script type='text/javascript' src="js/jquery.min.js"></script>
<script type='text/javascript'>
// Size the parent iFrame
function iframeResize() {
var height = $('body').outerHeight(); // IMPORTANT: If body's height is set to 100% with CSS this will not work.
parent.postMessage("resize::"+height,"*");
}
$(document).ready(function() {
// Resize iframe
setInterval(iframeResize, 1000);
});
</script>
iframeであなたのウェブサイト
<iframe src='example.html' id='edh-iframe'></iframe>
<script type='text/javascript'>
// Listen for messages sent from the iFrame
var eventMethod = window.addEventListener ? "addEventListener" : "attachEvent";
var eventer = window[eventMethod];
var messageEvent = eventMethod == "attachEvent" ? "onmessage" : "message";
eventer(messageEvent,function(e) {
// If the message is a resize frame request
if (e.data.indexOf('resize::') != -1) {
var height = e.data.replace('resize::', '');
document.getElementById('edh-iframe').style.height = height+'px';
}
} ,false);
</script>
Iframeのコンテンツの高さを取得します。このような:
document.getElementById('iframe-id').contentWindow.document.body.scrollHeight
更新
ただし、クロスドメインには問題がある可能性があります。さまざまなアプローチを示すいくつかのソースを次に示します。
http://css-tricks.com/cross-domain-iframe-resizing/
注:後者はフィールドへのアクセス方法を示していますが、原則は身長にアクセスする場合と同じです
ロードしているサイトのコードを操作するアクセス権がある場合、以下は、フレーム化されたコンテンツの高さが変わるたびにiframe
コンテナの高さを更新する包括的な方法を提供します。
ロードしているページに次のコードを追加します(おそらくヘッダーに)。このコードは、DOMの更新(遅延読み込みの場合)またはウィンドウのサイズ変更(ユーザーがブラウザーを変更した場合)のたびに、HTMLコンテナーの高さを含むメッセージを送信します。
window.addEventListener("load", function(){
if(window.self === window.top) return; // if w.self === w.top, we are not in an iframe
send_height_to_parent_function = function(){
var height = document.getElementsByTagName("html")[0].clientHeight;
//console.log("Sending height as " + height + "px");
parent.postMessage({"height" : height }, "*");
}
// send message to parent about height updates
send_height_to_parent_function(); //whenever the page is loaded
window.addEventListener("resize", send_height_to_parent_function); // whenever the page is resized
var observer = new MutationObserver(send_height_to_parent_function); // whenever DOM changes PT1
var config = { attributes: true, childList: true, characterData: true, subtree:true}; // PT2
observer.observe(window.document, config); // PT3
});
Iframeが保存されているページに次のコードを追加します。これにより、iframeがロードするページからメッセージが送信された場合、iframeの高さが更新されます。
<script>
window.addEventListener("message", function(e){
var this_frame = document.getElementById("healthy_behavior_iframe");
if (this_frame.contentWindow === e.source) {
this_frame.height = e.data.height + "px";
this_frame.style.height = e.data.height + "px";
}
})
</script>
Javascriptには、クロスドメインのiframeの高さを見つけるオプションはありませんが、サーバー側のプログラミングを利用してこのようなことを行うことができます。この例ではPHP=
<code>
<?php
$output = file_get_contents('http://yourdomain.com');
?>
<div id='iframediv'>
<?php echo $output; ?>
</div>
<iframe style='display:none' id='iframe' src="http://yourdomain.com" width="100%" marginwidth="0" height="100%" marginheight="0" align="top" scrolling="auto" frameborder="0" hspace="0" vspace="0"> </iframe>
<script>
if(window.attachEvent) {
window.attachEvent('onload', iframeResizer);
} else {
if(window.onload) {
var curronload = window.onload;
var newonload = function(evt) {
curronload(evt);
iframeResizer(evt);
};
window.onload = newonload;
} else {
window.onload = iframeResizer;
}
}
function iframeResizer(){
var result = document.getElementById("iframediv").offsetHeight;
document.getElementById("iframe").style.height = result;
document.getElementById("iframediv").style.display = 'none';
document.getElementById("iframe").style.display = 'inline';
}
</script>
</code>