jQuery中彈出iframe內(nèi)嵌頁面元素到父頁面并全屏化的實(shí)例代碼
iframe和彈窗這些詞對(duì)于js高手來說都是耳熟能詳?shù)臇|西,作為一個(gè)新人來說,還在學(xué)習(xí)階段的我就在工作中遇到這么一個(gè)奇葩的需求,要在引入的iframe頁面里做一個(gè)全屏化的功能.
粗略一看,這還不容易,模擬下F11的功能鍵什么的,于是網(wǎng)上一搜還真有一大堆關(guān)于全屏化的案例,遂借來用之.
然后高高興興的拿一個(gè)沒有iframe引入的頁面做了個(gè)測(cè)試頁面查看全屏化功能效果,代碼如下(fullScreenPage.html):
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Control Tower</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> </head> <body style="margin: 0px;height: 100%;width: 100%;"> <div id="buttonPanel" style="position: absolute;left: 25%;z-index:100"> <input id="full_screen_open" type="button" value="打開全屏"> <input id="full_screen_close" type="button" value="退出全屏" style="display: none"> </div> <div id="container" style="display:table;height: 50%;width: 50%;background-color: #004981;position:absolute;left: 25%;"> <div style="display:table-cell;height: 50%;width: 50%;text-align: center;vertical-align: middle;border: 2px solid #DDDDDD;"> <font id="font" size="30"></font> </div> </div> </body> <script src="./scripts/jquery/jquery-1.11.3.js" type="text/javascript"></script> <script type="text/javascript"> $("#full_screen_open").on("click",function(){ requestFullScreen($("#container")['0']); $("#font").empty(); $("#font").text("已打開全屏化"); }); var requestFullScreen = function(element) { var requestMethod = element.requestFullScreen || element.webkitRequestFullScreen || element.mozRequestFullScreen || element.msRequestFullScreen; if (requestMethod) { requestMethod.call(element); } else if (typeof window.ActiveXObject !== "undefined") { var wscript = new ActiveXObject("WScript.Shell"); if (wscript !== null) { wscript.SendKeys("{F11}"); } } } </script> </html>
嗯,我自己覺得這個(gè)效果真的是不要太棒了,還做了瀏覽器兼容(FireFox=mozRequestFullScreen;W3C=requestFullscreen;Chrome等=webkitRequestFullScreen;ie11=msRequestFullscreen).....
于是,我立馬放到項(xiàng)目里,結(jié)果是什么樣子呢?執(zhí)行下面的代碼(parentPage.html)就知道了....
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Control Tower</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> </head> <body style="margin: 0px;height: 100%;width: 100%;"> <div id="parentContainer" style="height: 75%;width: 75%;position:absolute;left: 12.5%;border: 2px solid red;"> <!-- 藍(lán)色邊框以內(nèi)的內(nèi)容是引入的iframe頁面內(nèi)容,也是需要做全屏化功能的頁面 --> <iframe src="fullScreenPage.html" style="border: 2px solid blue;height: 100%;width: 100%;"></iframe> </div> </body> </html>
哦豁,好像沒生效,那么為什么呢?
很明顯沒有起作用,那么怎么辦呢?既然引入的子頁面iframe不生效,是不是從父頁面或許就可以了?
那就趕緊試試找到父類并執(zhí)行全屏功能,把頁面(fullScreenPage.html)改一改,代碼如下:
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Control Tower</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> </head> <body style="margin: 0px;height: 100%;width: 100%;"> <div id="buttonPanel" style="position: absolute;left: 25%;z-index:100"> <input id="full_screen_open" type="button" value="打開全屏"> <input id="full_screen_close" type="button" value="退出全屏" style="display: none"> </div> <div id="container" style="display:table;height: 50%;width: 50%;background-color: #004981;position:absolute;left: 25%;"> <div style="display:table-cell;height: 50%;width: 50%;text-align: center;vertical-align: middle;border: 2px solid #DDDDDD;"> <font id="font" size="30"></font> </div> </div> </body> <script src="./scripts/jquery/jquery-1.11.3.js" type="text/javascript"></script> <script type="text/javascript"> $("#full_screen_open").on("click",function(){ /* 獲取父類的document */ var parentDoc = parent.document; /* 定義一個(gè)接收元素的變量 */ var thisIframe = null; /* 用jQuery遍歷父類的所有iframe,找到我引入的那個(gè)iframe, 假設(shè)我不知道是哪個(gè)頁面要引入我的iframe,但是引入我的iframe的src肯定會(huì)有引入這個(gè)頁面的名字, 所以通過這個(gè)去檢索,一定能找到引入這個(gè)頁面的iframe,然后把這個(gè)iframe的元素全屏化也就是把原來的頁面全屏化 */ $("iframe",window.parent.document).each(function(index,e){ if (e.src.indexOf("fullScreenPage.html") > 0) { thisIframe = e; return false; } }); requestFullScreen(thisIframe); $("#font").empty(); $("#font").text("已打開全屏化"); }); var requestFullScreen = function(element) { var requestMethod = element.requestFullScreen || element.webkitRequestFullScreen || element.mozRequestFullScreen || element.msRequestFullScreen; if (requestMethod) { requestMethod.call(element); } else if (typeof window.ActiveXObject !== "undefined") { var wscript = new ActiveXObject("WScript.Shell"); if (wscript !== null) { wscript.SendKeys("{F11}"); } } } </script> </html>
哈哈,改了之后發(fā)現(xiàn)果然可以了,問題解決。
jQuery還請(qǐng)自行下載并導(dǎo)入引用,我這里就不細(xì)說了.
這里分享一個(gè)jQuery下載的地址:jquery下載所有版本(實(shí)時(shí)更新)
以上所述是小編給大家介紹的jQuery中彈出iframe內(nèi)嵌頁面元素到父頁面并全屏化的實(shí)現(xiàn)代碼,希望對(duì)大家有所幫助,如果大家有任何疑問請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
- JQueryiframe頁面操作父頁面中的元素與方法(實(shí)例講解)
- jquery、js調(diào)用iframe父窗口與子窗口元素的方法整理
- js與jQuery 獲取父窗、子窗的iframe
- JQuery操作iframe父頁面與子頁面的元素與方法(實(shí)例講解)
- jquery 查找iframe父級(jí)頁面元素的實(shí)現(xiàn)代碼
- iframe里面的元素觸發(fā)父窗口元素事件的jquery代碼
- 使用jquery/js獲取iframe父子級(jí)、同級(jí)獲取元素的方法
- JQUERY 獲取IFrame中對(duì)象及獲取其父窗口中對(duì)象示例
- jQuery實(shí)現(xiàn)iframe父窗體和子窗體的相互調(diào)用
- 利用JQuery操作iframe父頁面、子頁面的元素和方法匯總
相關(guān)文章
jquery 實(shí)現(xiàn)京東商城、凡客商城的圖片放大效果
京東商城、凡客商城的圖片放大效果很是吸引人2009-05-05jquery中cookie用法實(shí)例詳解(獲取,存儲(chǔ),刪除等)
這篇文章主要介紹了jquery中cookie用法,結(jié)合實(shí)例詳細(xì)分析了jQuery操作cookie的獲取,存儲(chǔ),刪除等操作,并附帶了Jquery操作Cookie記錄用戶查詢過信息實(shí)現(xiàn)方法,需要的朋友可以參考下2016-01-01jQuery實(shí)現(xiàn)checkbox的簡單操作
這篇文章主要介紹了jQuery實(shí)現(xiàn)checkbox的簡單操作,對(duì)復(fù)選框組的全選、全不選、不全選,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-11-11JQuery 動(dòng)態(tài)擴(kuò)展對(duì)象之另類視角
大家都知道javascript是動(dòng)態(tài)語言,它對(duì)動(dòng)態(tài)的支持是與身俱來的。2010-05-05jquery.validate提示錯(cuò)誤信息位置方法
這篇文章主要介紹了jquery.validate提示錯(cuò)誤信息位置方法,實(shí)例分析了jquery.validate實(shí)現(xiàn)提示錯(cuò)誤信息位置的相關(guān)技巧,需要的朋友可以參考下2016-01-01使用jquery動(dòng)態(tài)加載js文件的方法
這篇文章主要介紹了使用jquery動(dòng)態(tài)加載js文件的方法,需要的朋友可以參考下2014-12-12JQuery實(shí)現(xiàn)表格中相同單元格合并示例代碼
一定要注意如果從list的開始元素循環(huán)下去,remove掉一個(gè)元素后,有些元素就找不到了或者說不是要找的那個(gè)元素,感興趣的各位可以研究下哈2013-06-06從零開始學(xué)習(xí)jQuery (七) jQuery動(dòng)畫實(shí)現(xiàn) 讓頁面動(dòng)起來
開發(fā)人員一直痛疼做動(dòng)畫. 但是有了jQuery你會(huì)瞬間成為別人(那些不知道jQuery的人)眼里的動(dòng)畫高手! 本文將介紹jQuery的動(dòng)畫相關(guān)函數(shù).原來做動(dòng)畫如此簡單!2011-02-02