iframe和彈窗這些詞對于js高手來說都是耳熟能詳的東西,作為一個新人來說,還在學習階段的我就在工作中遇到這么一個奇葩的需求,要在引入的iframe頁面里做一個全屏化的功能.

粗略一看,這還不容易,模擬下F11的功能鍵什么的,于是網上一搜還真有一大堆關于全屏化的案例,遂借來用之.

然后高高興興的拿一個沒有iframe引入的頁面做了個測試頁面查看全屏化功能效果,代碼如下(fullScreenPage.html):

Control Tower

$("#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}");

}

}

}

嗯,我自己覺得這個效果真的是不要太棒了,還做了瀏覽器兼容(FireFox=mozRequestFullScreen;W3C=requestFullscreen;Chrome等=webkitRequestFullScreen;ie11=msRequestFullscreen).....

于是,我立馬放到項目里,結果是什么樣子呢?執行下面的代碼(parentPage.html)就知道了....

Control Tower

哦豁,好像沒生效,那么為什么呢?

很明顯沒有起作用,那么怎么辦呢?既然引入的子頁面iframe不生效,是不是從父頁面或許就可以了?

那就趕緊試試找到父類并執行全屏功能,把頁面(fullScreenPage.html)改一改,代碼如下：

Control Tower

$("#full_screen_open").on("click",function(){

/* 獲取父類的document */

var parentDoc = parent.document;

/* 定義一個接收元素的變量 */

var thisIframe = null;

/* 用jQuery遍歷父類的所有iframe,找到我引入的那個iframe,

假設我不知道是哪個頁面要引入我的iframe,但是引入我的iframe的src肯定會有引入這個頁面的名字,

所以通過這個去檢索,一定能找到引入這個頁面的iframe,然后把這個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}");

}

}

}

哈哈,改了之后發現果然可以了,問題解決。

jQuery還請自行下載并導入引用,我這里就不細說了.

這里分享一個jQuery下載的地址：jquery下載所有版本(實時更新)

以上所述是小編給大家介紹的jQuery中彈出iframe內嵌頁面元素到父頁面并全屏化的實現代碼，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對網站的支持！

總結

以上是生活随笔為你收集整理的php退出页面父元素,jQuery中弹出iframe内嵌页面元素到父页面并全屏化的实例代码...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。