window彈出框在iframe之外顯示
Ext.net 使用了tab 控制元件,但是載入的時候用的iframe,導致裡面如果有window彈出框,並且要全屏顯示的時候,不能跳出iframe顯示。
iframe頁面裡面如果有彈出框,則需要使用window.parent來加入你要新建的window物件,這樣就可以跳出iframe顯示,同時因為是new出來的,所以所有有關這個物件裡面的js物件前面也要加window.parent,top同樣也是。function addMainTab(tabPanel, url, id, title, icon) { var tab = Ext.getCmp(id); if (!tab) { tab = { id: id, title: title, closable: false, iconCls: "#" + icon, loader: { url: url, renderer: "frame", loadMask: { showMask: true, msg: "資料載入中,請稍候!" } } }; } tabPanel.add(tab); }
function OpenChildWindow(winID, title, url, width, height, icon) { var w = width; var h = height; if (!w || !h) { w = 600; h = 400; } win = new window.parent.Ext.Window({ //win = new top.Ext.Window({ id: "w" + winID, layout: "fit", title: title, modal: true, iconCls: "#" + icon, width: w, height: h, border: false, maximizable: false, constrain: true, closeAction: "destroy", loader: { url: url, renderer: "frame", scripts: true, loadMask: { showMask: true, msg: "Loading..." } }, listeners: { 'resize': function (e) { //var imageshow = Ext.get('imageshow').getValue(); //var imageshow = Ext.fly('imageshow'); //var maxWd = window.innerWidth; //var maxHt = window.innerHeight; //var maxWd = document.getElementsByTagName('iframe')[0].contentWindow.document.documentElement.clientWidth; //var maxHt = document.getElementsByTagName('iframe')[0].contentWindow.document.body.clientHeight; //alert("Height" + maxHt + "------width" + maxWd ); var prtExt = window.parent.Ext; var maxWd = e.width - 10; var maxHt = e.height - 30; console.log(typeof (maxWd)); //new Ext.Window({ new出來的寫法 //var h_iframe = document.getElementsByTagName('iframe')[0]//.getElementsByTagName('img'); //if (typeof (h_iframe) == 'undefined') { // return false; //} //var HidWidth = document.getElementsByTagName('iframe')[0].contentWindow.document.getElementById('HidWidth'); //var HidHeight = document.getElementsByTagName('iframe')[0].contentWindow.document.getElementById('HidHeight'); //var img_arr = document.getElementsByTagName('iframe')[0].contentWindow.document.getElementsByTagName('img'); var h_iframe=prtExt.getCmp('wWinCust').iframe; if (typeof (h_iframe) == 'undefined') { return false; } var HidWidth = prtExt.getCmp('wWinCust').iframe.dom.contentWindow.document.getElementById('HidWidth'); var HidHeight = prtExt.getCmp('wWinCust').iframe.dom.contentWindow.document.getElementById('HidHeight'); var img_arr = window.parent.Ext.getCmp('wWinCust').iframe.dom.contentWindow.document.getElementsByTagName('img'); HidWidth.value = maxWd; HidHeight.value = maxHt; console.log(maxWd + "---" + maxHt); if (img_arr.length == 0) { return false; } var h_img; var h_id = "imageshow"; for (var i = 0; i < img_arr.length; i++) { if (img_arr[i].id == h_id) h_img = img_arr[i]; } h_img.width = parseInt(''+ maxWd+''); h_img.height = parseInt('' + maxHt + ''); //console.log(h_iframe); console.log(h_img); } } }); win.show(); }
因為需要對window 視窗的裡面的圖片進行放大縮小自適應,所以需要操作裡面的img物件。操作iframe裡面的物件可以參照http://blog.csdn.net/theforever/article/details/6126635
JS獲取/設定iframe內物件元素、文件的幾種方法
1、IE專用(通過frames索引形象定位):
document.frames[i].document.getElementById('元素的ID');
2、IE專用(通過iframe名稱形象定位):以上方法,不僅對iframe適用,對frameset裡的frame也同樣適用。IE雖然擅於自定標準,但不得不說它很多的設計還是比較體現人性化的。比如這個,它在同樣支援下面的標準路徑之外,提供了一個簡潔且形象化的寫法。document.frames['iframe的name'].document.getElementById('元素的ID');
3、通用方法:
複製程式碼 程式碼如下:
document.getElementById('iframe的ID').contentWindow.document.getElementById('元素的ID')
注意要加上contentWindow,往往出現問題都是因為這個容易被忽略,它代表frame和iframe內部的視窗物件。
JS獲取iframe文件內容
<script type="text/javascript">
function getIframeContent(){ //獲取iframe中文件內容
var doc;
if (document.all){ // IE
doc = document.frames["MyIFrame"].document;
}else{ // 標準
doc = document.getElementById("MyIFrame").contentDocument;
}
return doc.body.innerHTML;
}
</script>
注意:上面的 .contentDocument 相當於 .contentWindow.document !
一、需求與遇到的問題
在網站的後臺管理中使用了iframe框架佈局,包括頂部選單、左側導航和主頁面。需求是:點選主頁面上的一個按鈕,在頂部選單欄的右側顯示“退出”連結,點選可退出系統。
我的思路是:在頂部的選單頁面放一個不可見的“退出”連結,當用戶點選位於iframe中的主頁面(mainPage.htm)中的按鈕時,在頂部選單頁面的右側顯示“退出”。
我現在遇到的問題是:如何在頁面的一個iframe子頁面(mainPage.htm)中獲取並且操作其它iframe子頁面(比如topPage.htm)中的HTML元素?
二、通過JS獲取並操作iframe中的元素來解決問題
這裡主要就是通過JS來操作Window物件。Window 物件表示瀏覽器中開啟的視窗,如果文件包含框架(frame 或 iframe 標籤),瀏覽器會為 HTML 文件建立一個 window 物件,併為每個框架建立一個額外的 window 物件。
經過我在網上查資料,找到了JS操作iframe中HTML元素的方法。示例如下。
function ShowExit() {
//獲取iframe的window物件
var topWin = window.top.document.getElementById("topNav").contentWindow;
//通過獲取到的window物件操作HTML元素,這和普通頁面一樣
topWin.document.getElementById("exit").style.visibility = "visible";
}
說明:第一步,通過window.top.document.getElementById("topNav")方法獲取了頂部選單頁面(topPage.htm)所在的iframe物件;第二步,通過上一步獲取到的iframe物件的contentWindow屬性得到了iframe中元素所在的window物件;第三步,通過上一步獲取到的window物件來操作iframe框架中的元素,這和操作不在iframe框架中的普通HTML元素是一樣的。
相關推薦
window彈出框在iframe之外顯示
Ext.net 使用了tab 控制元件,但是載入的時候用的iframe,導致裡面如果有window彈出框,並且要全屏顯示的時候,不能跳出iframe顯示。 function addMainTab(tabPanel, url, id, title, icon) {
彈出框頁面居中顯示的兩種方法
實現 代碼 clas height 元素 bottom osi 中間 blog 原文地址:http://blog.csdn.net/chueia/article/details/68927501 第一種: position:fixed; top:0; r
【庫房】easyui的messager.show彈出框頁面居中顯示
$.messager.show({ title: '提示', msg: '貨位編號不能為空', showType: 'fade',
Jquery的彈出框,始終顯示在裝置的正中間
作為前端,彈窗是經常寫的,大多數彈出框都會顯示在裝置(PC或者移動端)的正中間。下面給大家介紹下我的方法,僅供參考! 1.讓層始終顯示在螢幕正中間: Css程式碼:Html程式碼 .mode
iframe中嵌入彈出框問題
區域 調用 image 模態 com frame images 解決方案 ram 但我們在開發項目中,有時候會遇到奇怪的問題,我們比如用iframe開發項目,嵌入模態框的時候,會發現模態框占不滿屏,始終在一個區域,解決方案 1》我們要找到iframe的父級,然後從父級入手
Mint-ui 中 Popup 作為組件引入,控制彈出框的顯示與隱藏遇到的問題。
cli bubuko 方式 解決 pro 傳遞 顯示與隱藏 gin ott Popup組件的結構: <template> <div> <!--分享彈出窗 begin--> <mt-popup class="sha
jquery Bootstrap 彈出框(Popover)顯示html內容,URL,div等
containe inpu lock ext ace src group mar 顯示 實現效果: 其實有個關鍵點: data-container="body" data-html="true" 註意下就可以了 <button type="button" class=
IOS8中SWIFT 彈出框的顯示
彈出框不管是在網頁端,還是在手機APP端,都是常用的控制元件.在網頁中實現個簡單的彈出框只需要呼叫alert,在IOS中,也不是那麼複雜,也是容易使用的. 我先用xcode6建立一個名為iOS8SwiftAlertViewTutorial,設定好相關的資訊. 在S
彈出框顯示2秒後,自動消失
jQuery(document).ready(function($) { $('.theme-login').click(function(){ $('.theme-popover-mask').fadeIn(100);
PopupWindow彈出框不顯示解決方案
PopupWindow設定好了之後,怎麼都不顯示出來,仔細檢查,需要新增以下程式碼(設定寬度及高度): this.setContentView(view); this.setWidth(LinearLayout.LayoutParams.MATCH_PARENT); th
利用OpenLayers3在地圖上顯示標記並點選標記後顯示彈出框
前言 在上一篇《利用全能電子地圖下載器+GeoWebCache釋出Arcgis Server快取瓦片過程全記錄》中,我們利用GeoWebCache作為瓦片地圖伺服器釋出了瓦片地圖。雖然在其中可以直接瀏覽,但是在GeoWebCache1.10.0中,官方內建的是OpenLayers2的
重置$.messager.confirm 彈出框的高度,以及顯示的文字
$.messager.defaults = { ok: "需要",collapsible:false,minimizable:false,maximizable:false,resizable:false,cancel:"不需要",width:'250px',height:'
javaweb-list頁面顯示在彈出框內
如圖所示: 這個任務的限制在於: 彈出框的jsp和首頁面的jsp是同一個頁面 後臺需要返回資料,不能是model 因此後臺採用了返回json字串,前臺解析json字串為json資料,獲取json物
實現iframe巢狀的子頁面彈出框覆蓋父頁面案例
我最近開發一個專案需要用到window彈出框,前臺涉及到了eaysui框架,查看了api只是告訴你window("open")和window("close"),但是開啟的只是子頁面裡面的彈框,因此我想把這個方法記錄下來。第一點:要給父iframe頁面一個<div id=
QTP錄製後彈出框一個或多個ActiveX控制元件無法顯示的解決方法
錄製一段指令碼程式碼,在專家檢視視窗中編輯錄制的指令碼程式碼時,會碰到彈出一個對話視窗,提示為“當前安全設定禁止執行該頁中的ActiveX 控制元件,因此,該頁可能無法正常顯示”類似的東西,而在人工操作時卻沒有這樣的現象。(如圖) 問題主要出在於QTP設定本身,之所以在編輯錄制好的指
去掉alert,confirm彈出框顯示的url
重寫兩個方法,即可達到要求,防範如下,寫在<script>裡即可 <script> window.alert = function(name){
ISO手機端的h5介面 alert彈出框 不顯示IP地址
<script> window.alert = function(name){ var iframe = document.createElement("IFRAM
第二百四十六節,Bootstrap彈出框和警告框插件
popover 事件 png div 數字 ott hid strong selector Bootstrap彈出框和警告框插件 學習要點: 1.彈出框 2.警告框 本節課我們主要學習一下 Bootstrap 中的彈出框和警告框插件。 一.彈出框 彈
(轉)!註意:PreTranslateMessage彈出框出錯
成員變量 缺省 保存 失效 key ssa 非模態窗口 之前 close dlg.DoModal()截住了界面消息,所以返回時原來的pMsg的內容已經更改了,消息,窗口句柄都不在是if以前的值了,而且窗口句柄應該是對話框裏的子窗口的句柄,所以調用CFrameWnd::Pre
蒙版彈出框效果
miss over 蒙版 bsp reat roi ges title reg 自定義 package cn.lxsdb.yyd.app.dialog; import cn.lxsdb.yyd.app.R; import cn.lxsdb.yyd.app.