JavaScript高級(jí)程序設(shè)計(jì) 閱讀筆記(十五) 瀏覽器中的JavaScript
窗口操作
Window對(duì)象對(duì)操作瀏覽器窗口非常有用,開發(fā)者可以移動(dòng)或調(diào)整瀏覽器窗口的大小??捎盟姆N方法實(shí)現(xiàn)這些操作:
moveBy(dx,dy):把瀏覽器窗口相對(duì)當(dāng)前位置水平移動(dòng)dx個(gè)像素,垂直移動(dòng)dy個(gè)像素。dx值為負(fù)左移,dy為負(fù)上移。
moveTo(x,y):移動(dòng)瀏覽器窗口,使它的左上角位于用戶屏幕的(x,y)處??梢允褂秘?fù)數(shù),不過這樣會(huì)把部分窗口移出屏幕的可視區(qū)域。
resizeBy(dw,dh):相對(duì)瀏覽器窗口當(dāng)前大小,把窗口的寬度調(diào)整dw個(gè)像素,高度調(diào)整dy個(gè)像素。dw、dy為負(fù)時(shí)縮小窗口。
resizeTo(w,h):把窗口的寬度調(diào)整為w,高度調(diào)整為h,不能使用負(fù)數(shù)。
注,F(xiàn)ireFox跟Chrome默認(rèn)不允許進(jìn)行此操作,要在安全設(shè)置里更改
效果(在IE瀏覽器中有效果):
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
導(dǎo)航和打開新窗口
導(dǎo)航和打開新窗口用 window.open() 方法,該方法接受四個(gè)參數(shù),即要載入新窗口的頁面的URL,新窗口名字,特性字符串和說明是否用新載入的頁面替換當(dāng)前載入的頁面的Boolean值。一般只用前三個(gè)參數(shù),最后一個(gè)參數(shù)只有在window.open()打不開新窗口時(shí)才有效。
第三個(gè)參數(shù)可選值如下:
top=pixels窗口的 y 坐標(biāo)。
left=pixels | 窗口的 x 坐標(biāo)。以像素計(jì)。 |
height=pixels | 窗口文檔顯示區(qū)的高度。以像素計(jì)。 |
width=pixels | 窗口的文檔顯示區(qū)的寬度。以像素計(jì)。 |
resizable=yes|no | 窗口是否可調(diào)節(jié)尺寸。默認(rèn)是 yes。 |
scrollable=yes|no | 是否顯示滾動(dòng)條。默認(rèn)是 yes。 |
location=yes|no | 是否顯示地址字段。默認(rèn)是 yes。 |
status=yes|no | 是否添加狀態(tài)欄。默認(rèn)是 yes。 |
toolbar=yes|no | 是否顯示瀏覽器的工具欄。默認(rèn)是 yes。 |
特性字符串是以逗號(hào)分隔的,所以在逗號(hào)或等號(hào)后不能有空格。
示例:
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
document對(duì)象
用document的open、write、close等方法可以向新打開的窗口中寫入內(nèi)容,如下所示:
<script type="text/javascript">
function run(){
var oNewWin=window.open("about:blank","newwindow","height=300,width=400");
oNewWin.document.open();
oNewWin.document.write("<html><body><script>function test(){alert('test');}</scr"+"ipt><input type='button' value='test' onclick='test()'/></body></html>");
oNewWin.document.close();
}
</script>
<input type='button' value='run' onclick='run()'/>
location對(duì)象
location對(duì)象可以用來解析URL,例如 URL為:http://chabaoo.cn/2012/04/14/2446762.html#top?id=1,則:
hash:#top
host:www.cnblogs.com
hostname:www.cnblogs.com
href:http://chabaoo.cn/2012/04/14/2446762.html#top?id=1
pathname:/artwl/archive/2012/04/14/2446762.html
port:空白
protocol:http:
search:?id=1
作者:Artwl
出處:http://artwl.cnblogs.com
- JavaScript高級(jí)程序設(shè)計(jì) 閱讀筆記(二十) js錯(cuò)誤處理
- JavaScript高級(jí)程序設(shè)計(jì) 閱讀筆記(十九) js表格排序
- JavaScript高級(jí)程序設(shè)計(jì) 閱讀筆記(十八) js跨平臺(tái)的事件
- JavaScript高級(jí)程序設(shè)計(jì) 閱讀筆記(十七) js事件
- JavaScript高級(jí)程序設(shè)計(jì)閱讀筆記(十六) javascript檢測(cè)瀏覽器和操作系統(tǒng)-detect.js
- JavaScript高級(jí)程序設(shè)計(jì) 閱讀筆記(十四) js繼承機(jī)制的實(shí)現(xiàn)
- JavaScript高級(jí)程序設(shè)計(jì) 閱讀筆記(十三) js定義類或?qū)ο?/a>
- JavaScript高級(jí)程序設(shè)計(jì) 閱讀筆記(十二) js內(nèi)置對(duì)象Math
- JavaScript高級(jí)程序設(shè)計(jì) 讀書筆記之十一 內(nèi)置對(duì)象Global
- JavaScript高級(jí)程序設(shè)計(jì) 讀書筆記之十 本地對(duì)象Date日期
- JavaScript高級(jí)程序設(shè)計(jì) 讀書筆記之九 本地對(duì)象Array
- JavaScript高級(jí)程序設(shè)計(jì) 讀書筆記之八 Function類及閉包
- JavaScript高級(jí)程序設(shè)計(jì) 閱讀筆記(七) ECMAScript中的語句
- JavaScript高級(jí)程序設(shè)計(jì)閱讀筆記(六) ECMAScript中的運(yùn)算符(二)
- JavaScript高級(jí)程序設(shè)計(jì)閱讀筆記(五) ECMAScript中的運(yùn)算符(一)
- JavaScript高級(jí)程序設(shè)計(jì) 閱讀筆記(四) ECMAScript中的類型轉(zhuǎn)換
- 《JavaScript高級(jí)程序設(shè)計(jì)》閱讀筆記(三) ECMAScript中的引用類型
- 《JavaScript高級(jí)程序設(shè)計(jì)》閱讀筆記(二) ECMAScript中的原始類型
- 《JavaScript高級(jí)程序設(shè)計(jì)》閱讀筆記(一) ECMAScript基礎(chǔ)
- JavaScript高級(jí)程序設(shè)計(jì) 閱讀筆記(二十一) JavaScript中的XML
相關(guān)文章
js實(shí)現(xiàn)視圖和數(shù)據(jù)雙向綁定的方法分析
這篇文章主要介紹了js實(shí)現(xiàn)視圖和數(shù)據(jù)雙向綁定的方法,結(jié)合實(shí)例形式分析了vue.js及jQuery數(shù)據(jù)綁定相關(guān)操作技巧與注意事項(xiàng),需要的朋友可以參考下2020-02-02JavaScript基于libgif.js實(shí)現(xiàn)控制gif動(dòng)畫幀
這篇文章主要為大家詳細(xì)介紹了JavaScript如何利用libgif.js插件控制gif動(dòng)畫幀,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-02-02layui.js實(shí)現(xiàn)的表單驗(yàn)證功能示例
這篇文章主要介紹了layui.js實(shí)現(xiàn)的表單驗(yàn)證功能,結(jié)合實(shí)例形式分析了基于layui.js的事件監(jiān)聽、驗(yàn)證、判定等相關(guān)操作技巧,需要的朋友可以參考下2017-11-11JavaScript操作Oracle數(shù)據(jù)庫示例
這篇文章主要介紹了JavaScript操作Oracle數(shù)據(jù)庫示例,本文使用ActiveXObject實(shí)現(xiàn)訪問Oracle數(shù)據(jù)庫,需要的朋友可以參考下2015-03-03微信小程序點(diǎn)擊圖片實(shí)現(xiàn)長按預(yù)覽、保存、識(shí)別帶參數(shù)二維碼、轉(zhuǎn)發(fā)等功能
這篇文章主要介紹了微信小程序點(diǎn)擊圖片實(shí)現(xiàn)長按預(yù)覽、保存、識(shí)別帶參數(shù)二維碼、轉(zhuǎn)發(fā)等功能,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-07-07el-select加上搜索查詢時(shí)限制開頭空格輸入的解決方案
這篇文章主要介紹了el-select加上搜索查詢時(shí),限制開頭空格輸入的解決方案,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧2024-02-02密碼強(qiáng)度檢測(cè)效果實(shí)現(xiàn)原理與代碼
密碼強(qiáng)度檢測(cè)有利于提醒增加密碼的安全指數(shù),更好的保護(hù)密碼安全,接下來介紹密碼強(qiáng)度檢測(cè)效果的實(shí)現(xiàn)2013-01-01深入淺析JavaScript面向?qū)ο蠛驮秃瘮?shù)
這篇文章主要介紹了深入淺析JavaScript面向?qū)ο蠛驮秃瘮?shù)的相關(guān)資料,需要的朋友可以參考下2016-02-02