同社のウェブサイトのバックエンドは当初 iframe を使用して設計されていませんでしたが、その後、リソースを節約するために議論の結果、ウェブサイトのバックエンドを iframe に変更することにしました。 iframe は ajax と同様の部分更新効果を実現できます (実装原理は異なります)。iframe は非常に強力ですが、サブページの高さに応じて自動的に拡張することができません。これは非常に面倒なので、ネットで検索してみました。以下の方法を見つけて、いくつかの改善を加えてください。
1. jquery の取得 (注: この方法は、同じドメイン名の下にある親およびサブカテゴリのページにのみ適しており、サブカテゴリのページには iframe を含めることはできません)
aa.html (親およびページ)
<iframe name="rightcontent" id="rightcontent" src='bb.html' frameborder="0" width="100%" scrolling="no"></iframe>
$("#rightcontent").load(function(){
var mainheight = $(this).contents().find("body").height()+30;
$(this).height(mainheight);
});2 js を使用して取得します (js を取得する方法はインターネット上に多数あり、簡単な検索で見つけることができますが、サブカテゴリ ページには iframe を含めることができないことに注意してください。サブカテゴリ ページに ifrme がある場合、自動拡張効果は得られません)
function SetCwinHeight(obj) {
var cwin = obj;
if (document.getElementByIdx_x_x_x) {
if (cwin && !window.opera) {
if (cwin.contentDocument && cwin.contentDocument.body.offsetHeight){
cwin.height = cwin.Document.body.offsetHeight + 30;
alert(cwin.height); //FF NS
}else if (cwin.Document && cwin.Document.body.scrollHeight){
cwin.height = cwin.Document.body.scrollHeight + 10;
} //IE
}else {
this.height=rightcontent.document.body.scrollHeight+30
if (cwin.contentWindow.document && cwin.contentWindow.document.body.scrollHeight)
cwin.height = cwin.contentWindow.document.body.scrollHeight; //Opera
}
}
}
<iframe name="rightcontent" id="rightcontent" src='bb.html' frameborder="0" width="100%" scrolling="no" onload="SetCwinHeight(this)">
</iframe>3. サブカテゴリー ページに含まれる iframe、つまり iframe ネストをサポートします (Firefox と IE でテスト済み、他のブラウザーはまだテストされていません)
<iframe name="rightcontent" id="rightcontent" src='bb.html' frameborder="0" width="100%" scrolling="no" onload="this.height=rightcontent.document.body.scrollHeight+50"></iframe>
4. これは、Web サイトが使用する補足的なものです。方法 3 ですが、クロスドメイン名が含まれる場合は、
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
