次の3つの選択肢があります。
1. iFrame-resizerを使用します
これは、iFrameをコンテンツに合わせてサイズ調整するためのシンプルなライブラリです。 IE8-10の代替として、PostMessageおよびMutationObserver APIを使用します。また、コンテンツページが含まれているiFrameが特定のサイズであることを要求するオプションがあり、処理が完了したらiFrameを閉じることもできます。
https://github.com/davidjbradshaw/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ベースのソリューションを使用することで機能します。
Stackoverflowのこのスレッド も参照してください（他にもあります。これはよくある質問です）。また、 Facebookは同様のアプローチを使用しているようです 。
3.サーバー経由で通信する
別のオプションは、iframeの高さをサーバーに送信してから、JSONPを使用して親Webページからそのサーバーからポーリングする（または、可能であれば長いポーリングを使用する）ことです。
コンテンツに基づいてiframeの高さを動的に設定するためのソリューションを得ました。これは、クロスドメインコンテンツに対して機能します。これを達成するために従うべきいくつかのステップがあります。
「abc.com/page」Webページにiframeを追加したとします
<div> <iframe id="IframeId" src="http://xyz.pqr/contactpage" style="width:100%;" onload="setIframeHeight(this)"></iframe> </div>次に、Webページ「abc.com/page」の下にWindows「メッセージ」イベントをバインドする必要があります
window.addEventListener('message', function (event) {
//Here We have to check content of the message event for safety purpose
//event data contains message sent from page added in iframe as shown in step 3
if (event.data.hasOwnProperty("FrameHeight")) {
//Set height of the Iframe
$("#IframeId").css("height", event.data.FrameHeight);
}
});
On iframe load you have to send message to iframe window content with "FrameHeight" message
function setIframeHeight(ifrm) {
var height = ifrm.contentWindow.postMessage("FrameHeight", "*");
}- ここでiframeの下に追加されたメインページ "xyz.pqr/contactpage"では、 "abc.com/page"の親ウィンドウからすべてのメッセージを受信するWindows "message"イベントをバインドする必要があります。
window.addEventListener('message', function (event) {
// Need to check for safty as we are going to process only our messages
// So Check whether event with data(which contains any object) contains our message here its "FrameHeight"
if (event.data == "FrameHeight") {
//event.source contains parent page window object
//which we are going to use to send message back to main page here "abc.com/page"
//parentSourceWindow = event.source;
//Calculate the maximum height of the page
var body = document.body, html = document.documentElement;
var height = Math.max(body.scrollHeight, body.offsetHeight,
html.clientHeight, html.scrollHeight, html.offsetHeight);
// Send height back to parent page "abc.com/page"
event.source.postMessage({ "FrameHeight": height }, "*");
}
});最後に、iframeのロード時にiframeの高さが設定されます。
ハッピーコーディング!!!
私がやったことは、iFrameの高さを段階的に設定しながらサイズを変更するまでiframe scrollWidthを比較しました。そして、それは私にとってはうまくいきました。必要に応じて増分を調整できます。
<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>
このページの私の簡単な解決策は次のとおりです。 http://lab.ohshiftlabs.com/iframesize/
仕組みは次のとおりです。
基本的に、他のドメインでページを編集できる場合、サーバーに属する別のiframeページを配置して、Cookieに高さを保存できます。更新時にCookieを読み取る間隔で、iframeの高さを更新します。それだけです。
ダウンロード; http://lab.ohshiftlabs.com/iframesize/iframesizepost.Zip
Iframeのサイズを取得するためにPHPを使用するWeb開発用の別のサーバー側ソリューションを見つけました。
最初は、内部関数を介した外部呼び出しにサーバースクリプト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>
単純なecho curl_get_file_contents("location url iframe","activation proxy")を使用して、関数呼び出しによって生成されたhtmlをdiv（iframe_reserve）の下に表示する必要があります
これを実行した後、javascriptを使用したボディイベント関数onloadは、コンテンツdivの単純なコントロール（iframe_reserve）でページiframeの高さを取得します
そこで、divHeight = document.getElementById("iframe_reserve").clientHeight;を使用して、divコンテナ（iframe_reserve）をマスクした後に呼び出すページ外部の高さを取得しました。この後、適切な高さで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コンテンツは、スクリプトタグを配置した場所の下に挿入されます。
これが誰かに役立つことを願っています。 ????