目錄
你好!
首頁 web前端 js教程 js中window.open()的所有參數詳細解析_javascript技巧

js中window.open()的所有參數詳細解析_javascript技巧

May 16, 2016 pm 05:04 PM
js window.open 參數

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

複製程式碼


程式碼如下

 
--> 
 
 
因為著是一段javascripts程式碼,所以它們應該放在之間。 是對某些版本低的瀏覽器起作用,在這些舊瀏覽器中不會將標籤中的程式碼顯示為文字。要養成這個好習慣。 window.open ('page.html') 用於控制彈出新的視窗page.html,如果page.html不與主視窗在同一路徑下,前面應寫明路徑,絕對路徑(http://)和相對路徑(../)均可。用單引號和雙引號都可以,但不要混用。這段程式碼可以加入HTML的任意位置,和之間可以,間也可以,越前越早執行,尤其是頁面程式碼長,又想讓頁面早點彈出就盡量往前放。 
   

【2、經過設定後的彈出視窗】 
 下面再說一說彈出視窗的設定。只要再往上面的程式碼加一點東西就可以了。 我們來定制這個彈出的視窗的外觀,尺寸大小,彈出的位置以適應該頁面的具體情況。 複製程式碼

程式碼如下:


scriptGUAGE="script"> !-- 
window.open ('page.html', 'newwindow', 'height=100, width=400, top=0, left=0, toolbar=no, menubar=no, scrollbars=no, resizable =no,location=n o, status=no') //這句話要寫成一行
--> 
  
 
參數解釋:


js腳本結束
【3、用函數控制彈出視窗】
 
下面是完整的程式碼。 複製程式碼
程式碼如下:


 >🎜>  
 
 
任意的頁面內容... 
 
 

這裡定義了一個函數openwin(),函數內容就是開啟一個視窗。在調用它之前沒有任何用途。怎麼調用呢?
方法一: 瀏覽器讀取頁面時彈出視窗; 
方法二: 瀏覽器離開頁面時彈出視窗; 
方法三:用一個連線呼叫: 
開啟一個視窗 
注意:使用的「#」是虛連結。
方法四:用一個按鈕呼叫: 
 

【4、同時彈出2個視窗】 
 
 稍微改變一下原始碼: 
複製程式碼



複製程式碼



複製程式碼

 
   

以下程式碼加入主視窗區:




複製程式碼

程式碼如下:

程式碼如下:
  加入

區:  open即可。 

【6、彈出的窗口之定時關閉控制】
 

下面我們再對彈出的窗口進行一些控制,效果就更好了。如果我們再將一小段 程式碼加入彈出的頁面(注意是加入page.html的HTML中,可不是主頁面中,否則 ...),讓它10秒後自動關閉是不是更酷了?
首先,將下列程式碼加入page.html檔案的區: 


複製程式碼

程式碼如下:


setTimeout("self.close()",10000) //毫秒 

然後,再用 這句話取代page.html中原有的這句話就可以了。 (這句話千萬不要忘記寫啊!這句話的作用是呼叫關閉窗 口的程式碼,10秒鐘後就自行關閉該視窗。) 


【7.在彈出視窗中加上一個關閉按鈕】 
 
 
 
呵呵,現在更完美了!
【8、內包含的彈出視窗-一個頁兩個視窗】  上面的範例都包含兩個窗口,一個是主窗口,另一個是彈出的小窗口。透過下面的例子,你可以在一個頁面內完成上面的效果。  複製程式碼 程式碼如下:

 
 
 
function openwin() 

OpenWindow=window.open("", " newwin", "height=250, width=250,toolbar=no ,scrollbars="scroll",menubar=no" ); 
//寫成一行 
OpenWindow.document.write("範例<title>範例")  <br>OpenWindow.document.write(" ") 
OpenWindow.document.write("

你好!

") 
OpenWindow🎜>OpenWindow .document.write("新視窗開啟了!") 
OpenWindow.document.write("") 
OpenWindow.document.write("") 
OpenWindow.document.write("") 
OpenWindow. document.close() 


頭> 
 
打開一個一個視窗 
 
身體> 
 

看看OpenWindow.document.write()裡面的程式碼不就是標準的HTML嗎?只要按照格式寫更多的行即可。千萬注意多一個標籤或少一個標籤就會出現錯誤。記得用 OpenWindow.document.close() 結束啊。 

【9、終極應用--彈出的窗口之Cookie控制】 


回想一下,上面的彈出視窗雖然很酷,有一點小毛病(但是沉浸在喜悅,一定沒有發現吧?)比如你將上面的腳本放在一個需要清洗的頁面裡(例如首頁) ,那麼每次刷新這個頁面,視窗都會彈出一次,是不是很煩人? :-(

有解決的辦法嗎?是的!;-)跟我來。我們使用cookie來控制一下就可以了。 


首先,將下列程式碼加入主頁HTML的

區:  程式碼如下:


 
function openwin(){ 
window.open("page.html","","width=200,height=200") 


function get_cookie(Name) { 
var search = 名稱"=" 
var returnvalue = ""; 
if (document.cookie.length > 0) { 
offset = document.cookie.length > 0) { 
offset = document. search) 
if (offset != -1) { 
offset = search.length 
end = document.cookie.indexOf(";", offset); 
if (end ==indexOf(";", offset); 
if (end ==== -1 ) 
end = document.cookie.length; 
returnvalue=unescape(document.cookie.substring(offset, end)) 
}  } 
返回返回🎜>function loadpopup(){ 
if (get_cookie('popped')==''){ 
openwin() 
document.cookie="popped=yes" 
} >
腳本>

然後,用(注意不是openwin而不是loadpop啊!)替換主頁中原有的這一句即可。可以試著刷新一下這個頁面或重新進入該頁面,視窗再不會彈出了。真正的Pop-Only-Once! 
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡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脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱工具

記事本++7.3.1

記事本++7.3.1

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

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

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

建議:優秀JS開源人臉偵測辨識項目 建議:優秀JS開源人臉偵測辨識項目 Apr 03, 2024 am 11:55 AM

人臉偵測辨識技術已經是一個比較成熟且應用廣泛的技術。而目前最廣泛的網路應用語言非JS莫屬,在Web前端實現人臉偵測辨識相比後端的人臉辨識有優勢也有弱勢。優點包括減少網路互動、即時識別,大大縮短了使用者等待時間,提高了使用者體驗;弱勢是:受到模型大小限制,其中準確率也有限。如何在web端使用js實現人臉偵測呢?為了實現Web端人臉識別,需要熟悉相關的程式語言和技術,如JavaScript、HTML、CSS、WebRTC等。同時也需要掌握相關的電腦視覺和人工智慧技術。值得注意的是,由於Web端的計

股票分析必備工具:學習PHP和JS繪製蠟燭圖的步驟 股票分析必備工具:學習PHP和JS繪製蠟燭圖的步驟 Dec 17, 2023 pm 06:55 PM

股票分析必備工具:學習PHP和JS繪製蠟燭圖的步驟,需要具體程式碼範例隨著網路和科技的快速發展,股票交易已成為許多投資者的重要途徑之一。而股票分析是投資人決策的重要一環,其中蠟燭圖被廣泛應用於技術分析。學習如何使用PHP和JS繪製蠟燭圖將為投資者提供更多直觀的信息,幫助他們更好地做出決策。蠟燭圖是一種以蠟燭形狀來展示股票價格的技術圖表。它展示了股票價格的

如何使用PHP和JS創建股票蠟燭圖 如何使用PHP和JS創建股票蠟燭圖 Dec 17, 2023 am 08:08 AM

如何使用PHP和JS創建股票蠟燭圖股票蠟燭圖是股票市場中常見的技術分析圖形,透過繪製股票的開盤價、收盤價、最高價和最低價等數據,幫助投資者更直觀地了解股票的價格波動情形。本文將教你如何使用PHP和JS創建股票蠟燭圖,並附上具體的程式碼範例。一、準備工作在開始之前,我們需要準備以下環境:1.一台運行PHP的伺服器2.一個支援HTML5和Canvas的瀏覽器3

C++ 函式參數型別安全檢查 C++ 函式參數型別安全檢查 Apr 19, 2024 pm 12:00 PM

C++參數類型安全檢查透過編譯時檢查、執行時間檢查和靜態斷言確保函數只接受預期類型的值,防止意外行為和程式崩潰:編譯時類型檢查:編譯器檢查類型相容性。運行時類型檢查:使用dynamic_cast檢查類型相容性,不符則拋出異常。靜態斷言:在編譯時對型別條件進行斷言。

i9-12900H參數評測大全 i9-12900H參數評測大全 Feb 23, 2024 am 09:25 AM

i9-12900H是14核心的處理器,使用的架構和工藝都是全新的,線程也很高,整體的工作都是很優秀的,一些參數都有提升特別的全面,是可以給用戶們帶來極佳體驗的。 i9-12900H參數評測大全評測:1、i9-12900H是14核心的處理器,採用了q1架構以及24576kb的製程工藝,提升到了20個執行緒。 2.最大的CPU頻率是1.80!5.00ghz,整體主要取決於工作的負載。 3.相比較價位來說還是特別合適的,性價比很不錯,對於一些需要正常使用的伙伴來說非常的合適。 i9-12900H參數評測大全性能跑分

PHP與JS開發技巧:掌握繪製股票蠟燭圖的方法 PHP與JS開發技巧:掌握繪製股票蠟燭圖的方法 Dec 18, 2023 pm 03:39 PM

隨著網路金融的快速發展,股票投資已經成為了越來越多人的選擇。而在股票交易中,蠟燭圖是常用的技術分析方法,它能夠顯示股票價格的變動趨勢,幫助投資人做出更精準的決策。本文將透過介紹PHP和JS的開發技巧,帶領讀者了解如何繪製股票蠟燭圖,並提供具體的程式碼範例。一、了解股票蠟燭圖在介紹如何繪製股票蠟燭圖之前,我們首先需要先了解什麼是蠟燭圖。蠟燭圖是由日本人

js和vue的關係 js和vue的關係 Mar 11, 2024 pm 05:21 PM

js和vue的關係:1、JS作為Web開發基石;2、Vue.js作為前端框架的崛起;3、JS與Vue的互補關係;4、JS與Vue的實踐應用。

開源模型首勝GPT-4!競技場最新戰報引熱議,Karpathy:這是我唯二信任的榜單 開源模型首勝GPT-4!競技場最新戰報引熱議,Karpathy:這是我唯二信任的榜單 Apr 10, 2024 pm 03:16 PM

能打得過GPT-4的開源模型出現了!大模型競技場最新戰報:1040億參數開源模型CommandR+攀升至第6位,與GPT-4-0314打成平手,超過了GPT-4-0613。圖片這也是第一個在大模型競技場上擊敗GPT-4的開放權重模型。大模型競技場,可是大神Karpathy口中唯二信任的測試基準之一。圖片CommandR+來自AI獨角獸Cohere。這家大模型新創公司的共同創辦人兼CEO,正是Transformer最年輕作者AidanGomez(簡稱割麥子)。圖片這份戰報一出,又掀起了一波大模型社

See all articles