首頁 web前端 js教程 window.open參數詳解附實例_基礎知識

window.open參數詳解附實例_基礎知識

May 16, 2016 pm 05:32 PM
window.open

一、window.open()支援環境:

JavaScript1.0 /JScript1.0 /Nav2 /IE3 /Opera3

二、windown.open基本語法:

window.open(pageURL,name,parameters)

其中:

pageURL為子視窗路徑
name為子視窗句柄
parameters為視窗參數(各參數以逗號分隔)

三、windown.open範例:

複製程式碼 程式碼如下:

<script><--><! >window.open('page.html','newwindow','height=100,width=400,top=0,left=0,toolbar=no,menubar=no,scrollbars=no,resizable=no,location= no,status=no')<BR>//寫成一行<BR>--><BR></script>


腳本運行後,page.html將在新窗體newwindow中打開,寬為100,高為400,距屏頂0像素,屏左0像素,無工具條,無菜單條,無滾動條,不可調整大小,無網址列,無狀態列。請對照。

  上例中涉及的為常用的幾個參數,除此以外還有很多其他參數,請見四。四、各項參數

  其中yes/no也可使用1/0;pixelvalue為具體的數值,單位像素。

參數|取值範圍|說明


alwaysLowered|yes/no|指定視窗隱藏在所有視窗之後

alwaysRaised|yes/no|指定視窗懸浮在所有視窗之上

depended|yes/no|是否和父視窗同時關閉
directories|yes/no|Nav2和3的目錄列是否可見
height|pixelvalue|視窗高度
hotkeys|yes/no|在沒選單列的視窗中設安全退出熱鍵
innerHeight| pixelvalue|視窗中文件的像素高度
innerWidth|pixelvalue|視窗中文件的像素寬度
location|yes/no|位置列是否可見
menubar|yes/no|選單列是否可見
outerHeight|pixelvalue|設定視窗(包括裝飾邊框)的像素高度
outerWidth|pixelvalue|設定視窗(包括裝飾邊框)的像素寬度
resizable|yes/no|視窗大小是否可調整
screenX|pixelvalue|視窗距螢幕左邊界的像素長度
screenY|pixelvalue|視窗距螢幕上邊界的像素長度
scrollbars|yes/no|視窗是否可有捲動列
titlebar|yes/nono |視窗題目列是否可見
toolbar|yes/no|視窗工具列是否可見
Width|pixelvalue|視窗的像素寬度
z-look|yes/no|視窗啟動後是否浮在其它窗口之上

【1、最基本的彈出視窗程式碼】

其實程式碼非常簡單:

複製程式碼 程式碼如下:
window.open('page.html')
-->




因為著是一段javascripts程式碼,所以它們應該放在標籤和之間。 是對某些版本低的瀏覽器起作用,在這些舊瀏覽器中不會將標籤中的程式碼顯示為文字。要養成這個好習慣。 Window.open('page.html')用來控制彈出新的視窗page.html,如果page.html不與主視窗在同一路徑下,前面應寫明路徑,絕對路徑(http:// )和相對路徑(../)均可。用單引號和雙引號都可以,但不要混用。

這段程式碼可以加入HTML的任意位置,和之間可以,間也可以,越前越早執行,尤其是頁面程式碼長,又想使頁面早點彈出就盡量往前放。

【2、經過設定後的彈出視窗】

下面再說一說彈出視窗的設定。只要再往上面的程式碼加一點東西就可以了。

我們來客製化這個彈出的視窗的外觀,尺寸大小,彈出的位置以適應該頁面的具體情況。



[Ctrl A 全選 註:如需引入外部Js需刷新才能執行]

參數解釋:

js腳本開始;
window.open彈出新視窗的指令;
'page.html'彈出視窗的檔案名稱;
'newwindow'彈出視窗的名字(不是檔案名稱),非必須,可用空''代替;
height=100視窗高度;
width=400視窗寬度;
top=0視窗距離螢幕上方的像素值;
left=0視窗距離螢幕左側的像素值;
toolbar=no是否顯示工具列,yes為顯示;
menubar,scrollbars表示選單列和捲動列。
Resizable=no是否允許改變視窗大小,yes為允許;
location=no是否顯示網址列,yes為允許;
status=no是否顯示狀態列內的資訊(通常是檔案已開啟),yes為允許;
js腳本結束

【3、用函數控制彈出視窗】

下面是一個完整的程式碼

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳圖形設置
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.如果您聽不到任何人,如何修復音頻
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25:如何解鎖Myrise中的所有內容
4 週前 By 尊渡假赌尊渡假赌尊渡假赌

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

如何創建和發布自己的JavaScript庫? 如何創建和發布自己的JavaScript庫? Mar 18, 2025 pm 03:12 PM

文章討論了創建,發布和維護JavaScript庫,專注於計劃,開發,測試,文檔和促銷策略。

如何在瀏覽器中優化JavaScript代碼以進行性能? 如何在瀏覽器中優化JavaScript代碼以進行性能? Mar 18, 2025 pm 03:14 PM

本文討論了在瀏覽器中優化JavaScript性能的策略,重點是減少執行時間並最大程度地減少對頁面負載速度的影響。

前端熱敏紙小票打印遇到亂碼問題怎麼辦? 前端熱敏紙小票打印遇到亂碼問題怎麼辦? Apr 04, 2025 pm 02:42 PM

前端熱敏紙小票打印的常見問題與解決方案在前端開發中,小票打印是一個常見的需求。然而,很多開發者在實...

如何使用瀏覽器開發人員工具有效調試JavaScript代碼? 如何使用瀏覽器開發人員工具有效調試JavaScript代碼? Mar 18, 2025 pm 03:16 PM

本文討論了使用瀏覽器開發人員工具的有效JavaScript調試,專注於設置斷點,使用控制台和分析性能。

如何使用源地圖調試縮小JavaScript代碼? 如何使用源地圖調試縮小JavaScript代碼? Mar 18, 2025 pm 03:17 PM

本文說明瞭如何使用源地圖通過將其映射回原始代碼來調試JAVASCRIPT。它討論了啟用源地圖,設置斷點以及使用Chrome DevTools和WebPack之類的工具。

如何有效地使用Java的收藏框架? 如何有效地使用Java的收藏框架? Mar 13, 2025 pm 12:28 PM

本文探討了Java收藏框架的有效使用。 它強調根據數據結構,性能需求和線程安全選擇適當的收集(列表,設置,地圖,隊列)。 通過高效優化收集用法

初學者的打字稿,第2部分:基本數據類型 初學者的打字稿,第2部分:基本數據類型 Mar 19, 2025 am 09:10 AM

掌握了入門級TypeScript教程後,您應該能夠在支持TypeScript的IDE中編寫自己的代碼,並將其編譯成JavaScript。本教程將深入探討TypeScript中各種數據類型。 JavaScript擁有七種數據類型:Null、Undefined、Boolean、Number、String、Symbol(ES6引入)和Object。 TypeScript在此基礎上定義了更多類型,本教程將詳細介紹所有這些類型。 Null數據類型 與JavaScript一樣,TypeScript中的null

開始使用Chart.js:PIE,DONUT和BUBBLE圖表 開始使用Chart.js:PIE,DONUT和BUBBLE圖表 Mar 15, 2025 am 09:19 AM

本教程將介紹如何使用 Chart.js 創建餅圖、環形圖和氣泡圖。此前,我們已學習了 Chart.js 的四種圖表類型:折線圖和條形圖(教程二),以及雷達圖和極地區域圖(教程三)。 創建餅圖和環形圖 餅圖和環形圖非常適合展示某個整體被劃分為不同部分的比例。例如,可以使用餅圖展示野生動物園中雄獅、雌獅和幼獅的百分比,或不同候選人在選舉中獲得的投票百分比。 餅圖僅適用於比較單個參數或數據集。需要注意的是,餅圖無法繪製值為零的實體,因為餅圖中扇形的角度取決於數據點的數值大小。這意味著任何占比為零的實體

See all articles