前言
最近公司在做后臺管理系統(tǒng),需要實現(xiàn)單頁面的跳轉(zhuǎn),不知是誰突發(fā)奇想要用iframe標(biāo)簽來進行實現(xiàn)
在這過程中,遇到的問題,來分享一下
iframe的定義與用法
- iframe 元素會創(chuàng)建包含另外一個文檔的內(nèi)聯(lián)框架（即行內(nèi)框架）。
我自己在使用的時候是首先是創(chuàng)建一個父級頁面，固定好上部和左側(cè)，右側(cè)定義一個iframe標(biāo)簽，整個標(biāo)簽的寬度、高度占右側(cè)的100%
* 在定義iframe時,給iframe的設(shè)置:
`<div class="right"><div class="main"><iframe id="main_frame" name="open_frame" border="0" frameboder="0" scrolling="auto" width="100%" height="100%" src="./mainContext.html"></iframe></div></div>`
* 當(dāng)然了父頁面的a鏈接必須帶有 ` target="open_frame"` 屬性，這個 `target的值` 就是iframe中的 `name屬性` 的值
*
* .right這個盒子定義整個右側(cè)這一塊的位置；.main這個盒子定義樣式,比如說右側(cè)的padding等;
*
* iframe標(biāo)簽中的name屬性是為了給頁面上要顯示在這塊區(qū)域的鏈接一個約定;其他的屬性可以自己去查文檔,都有很詳細的解釋
iframe標(biāo)簽定義高度
* 在iframe標(biāo)簽中設(shè)置了 'height=100%',若頁面內(nèi)容不是很多,這個區(qū)域就撐不起來,所以需要我們使用JS來控制iframe的高度
`var $height=$(window).height();`
`$('iframe').css({'height':$height-140});` 當(dāng)然這是140是根據(jù)你的top的高度和 .main的pading、margin值來設(shè)置
在子頁面、父頁面互相獲取元素
** 必須開啟服務(wù)器,在這里介紹幾種開啟服務(wù)器方法 **
* 如果你配置好了WampServer,那么你只需要把代碼放在www文件夾中,通過localhost:端口號來進行訪問
* 你安裝了node和npm,那么你需要配置一下anywhere就可以了,它是一靜態(tài)服務(wù)器
配置方法: `npm install anywhere -g` <br/>
使用方法: 在當(dāng)前文件夾打開cmd命令行(shift+右鍵)，輸入 anywhere 端口號
* 服務(wù)器開啟起來了,你就可以跨域獲取元素了
子頁面獲取iframe父頁面元素的方法
* 方法一:
`var $arrow = $(".triangle-right", window.parent.document);`
* 方法二:
`var $arrow = $(window.parent.document).find(".triangle-right");`
父級頁面獲取iframe子頁面元素的方法
** 在父級頁面加載的時候,子級頁面不一定是加載完成的,所以建議使用子頁面獲取父級元素的方式 **
`var $mainCon = $("#mainCon",document.frames('iframename').document)`
【end】
