iframe標簽(頁面嵌套)


本文鏈接:https://blog.csdn.net/weixin_44540236/article/details/92760494

兩個不同的頁面但是它們的基本框架都是一樣,每點擊一次左邊的導航欄改變的都是中間的內容區域。也就是說共同的框架都是沒有改變的,改變的是中間的內容。

有沒有什么方法可以不改變外面的基本框架只改變中間的內容???

我們可以用頁面嵌套方法來達到這一要求。頁面嵌套的方法有很多種,在這我用的是標簽來達到頁面嵌套的效果。

定義: 標簽規定一個內聯框架,在當前html中嵌入另一個文檔;

一些常用屬性

參數 解析
align 根據周圍的文字排列 iframe。
frameBorder 是否顯示框架周圍的邊框。
noResize 框架是否可調整大小
scrolling 框架是否有滾動條。
src 被嵌入html中文檔的URL。

實列:

將開始截的圖片嵌入內容改成百度首頁

 

 

 

可以看出百度首頁已經被嵌入我們這個頁面了,但是嵌入后頁面出現了滾動條,嵌入頁面的滾動條影響了用戶體驗和頁面美觀所以我們得去除掉這個滾動條。其實就是設置iframe的高度,等於內嵌網頁的高度,這樣就看不出來滾動條和嵌套痕跡。
自動調節iframe高度Js代碼

//根據瀏覽器大小調整iframe高度
reSetSize();
window.onresize = reSetSize;
function reSetSize() {
var windowsHeight = window.innerHeight;
document.getElementById("content").style.height = (windowsHeight-框架頂部高度) + "px";
}

解析:
將你嵌入頁面的高度設置成屏幕可視高度減去原框架頂部和底部高度(寬度設置同理)。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM