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