こことここの指示に従いましたが、iframe の高さを自動調整するために easyXDM を正しく実装できません。
iframe (host.html) のあるページで、インポートしているコンテンツ (otherdomain.html) が表示されますが、iframe の高さがコンテンツよりもはるかに短く、高さが変化しません。残念ながら、これは私がここにリンクできない開発サイトにあります。
otherdomain.html にはクリックすると展開する要素があるため、ページのコンテンツに合わせて iframe を展開および縮小する必要があります。
誰が私が間違っているのか教えてもらえますか? これらは、私が使用している 2 つの異なるドメイン/サーバーです。ソケットをセットアップしたり、このようなことをしたのはこれが初めてです。コンソールにエラーは表示されませんが、それが私に言っていることからあまり意味がありません。
同様の質問がありますが、回答がありませんでした: easyXDM を使用した IFrame のサイズ変更
iFrame があるページにあるものは次のとおりです。
<style type="text/css">
div#embedded iframe {
width: 725px;
}
</style>
<script src="../js/easyXDM.debug.js" type="text/javascript"></script>
<script type="text/javascript" language="javascript">
new easyXDM.Socket({
remote: "http://lcoawebservices.com/careers/resize_intermediate.html?url=job-postings.php",
container: "embedded",
onMessage: function (message, origin) {
var settings = message.split(",");
this.container.getElementsByTagName("iframe")[0].style.height = settings[0];
this.container.getElementsByTagName("iframe")[0].style.width = settings[1];
}
});
</script>
<div id="embedded"></div>
resize_intermediate.html にあるものは次のとおりです。
<script type="text/javascript" src="../scripts/easyXDM.debug.js">
</script>
<script type="text/javascript">
var iframe;
var socket = new easyXDM.Socket({
swf: "../scripts/easyxdm.swf",
onReady: function(){
iframe = document.createElement("iframe");
iframe.frameBorder = 0;
document.body.appendChild(iframe);
iframe.src = easyXDM.query.url;
},
onMessage: function(url, origin){
iframe.src = url;
}
});
//Probe child.frame for dimensions.
function messageBack(){
socket.postMessage ( iframe.contentDocument.body.clientHeight + "," + iframe.contentDocument.body.clientWidth);
};
//Poll for changes on children every 500ms.
setInterval("messageBack()",500);
</script>
<style type="text/css">
html, body {
overflow: hidden;
margin: 0px;
padding: 0px;
width: 100%;
height: 100%;
}
iframe {
width: 100%;
height: 100%;
border: 0px;
}
</style>
インポートしているページの下部に、これを配置しました。
<script type="text/javascript">
window.onload = function(){
parent.socket.postMessage(document.body.clientHeight || document.body.offsetHeight || document.body.scrollHeight);
};
</script>