javascript腳本何時會被執行

avascript腳本可以嵌入在html內的任意地方，但它何時被調用呢？當瀏覽器打開HTML文件后，會直接運行不是聲明函數的腳本或通過事件調用腳本函數，下面分析這幾種情況。

1.瀏覽器在打開頁面時執行腳本

當瀏覽器打開一個HTML文件時，它會從頭開始解釋整個文件，包括html標簽和腳本。如果腳本中有可以直接執行的語句，則會在遇到的時候馬上解釋執行。主要有以下2種情形：
1).程序啟動(這里指瀏覽器加載頁面)這個alert這類函數就會被觸發執行

<html>
    <head>
        <title>demo</title>
        <script type="text/javascript">
            alert("dare you click me once again");    
        </script>
    </head>
    <body onLoad="display()">
    </body>
</html>

2).隨著瀏覽器加載解析js函數被自動調用(并不是用戶點擊等行為觸發)

2.利用onLoad事件執行腳本(相當于監聽發生，然后執行)**

onLoad事件是一個頁面在瀏覽器中被打開時發生的，該方法常用于在打開一個頁面的同時向用戶顯示一些消息。
下面例子利用標簽的onLoad事件進行演示:

<html>
    <head>
        <title>demo</title>
        <script type="text/javascript">
            //insert javascript code here.
            function display()
            {
                alert("dare you click me once again")    
            }
        </script>
    </head>
    <body onLoad="display()">
    </body>
</html>

3.利用用戶事件執行腳本

用戶在使用瀏覽器時經常會使用鼠標和鍵盤進行一些操作，比例移動鼠標、點擊鏈接或按鈕，這些操作都會產生相應的事件。我們可以利用這些事件來調用腳本函數。
下面例子利用一個點擊按鈕事件來調用display()函數。

<html>
    <head>
        <title>demo</title>
        <script type="text/javascript">
            //insert javascript code here.
            function display(){
                alert("you click me ,it is so pain")
                }
        </script>
    </head>
    <body>
        <center><br>
        <form>
            <input type="button" value="onclick" onclick="display()">
        </form>
    </center>
    </body>
</html>

本文作者：皮卡丘和羊寶貝
本文鏈接：https://www.cnblogs.com/lovelywcc/p/14368913.html

讀

本文是《JavaScript調試技巧合集》系列分享中的一篇，筆者希望在每篇文章中介紹一個關于JS調試的小知識點，希望你在讀完這個系列后，在調試技巧上能夠更加運用自如。下面是知識點概覽：

本次分享主題：為什么不推薦使用alert調試代碼？

對于使用alert調試代碼這件事情，我相信很多人都持不同的看法，就我個人而言，我是十分反對的，在列舉原因之前，我們一起先來看看MDN上是怎樣介紹alert的：

從上圖的“注意點一”我們可以看出，alert在幫助我們調試問題時，有它的局限性——只能顯示字符串，如果傳入的參數是一個其他對象，eg:

我們傳入了一個對象 {a:1} , 結果只能給到一個 [object Object] , 無法看到變量內部的結構。不建議使用！

從“注意點二”可以看出，alert創建的是一個模態框，如果在調試代碼時不小心把alert使用在某個循環中，eg:

for(let i=0;i<10000;i++){
    test();
}

function test(){
    //  some other code ....
    alert(/** something you want to inspect */);
}

上面的這段代碼一旦被執行，就會導致彈出很多次alert彈窗，頁面無法正常操作，如果在低版本的瀏覽器中，你不得不強制結束瀏覽器進程，在高版本瀏覽器中，你至少也得結束當前標簽頁進程才能解決問題。不建議使用！！

除此之外，我們能夠使用alert調試的問題，使用其它方案也都能夠替代，并且做得更好，比如使用console.log
上面幾點描述的都只是便利性問題，alert使用不當，還可能導致生產事故，如果你在代碼中使用了 alert調試代碼，卻沒有刪除，而你的項目中沒有使用到 eslint , jslint 等工具去保證質量，最終導致alert被提到了線上，最終在用戶側造成問題。

所以，大家以后debug還會使用alert么？

言

在 Web 自動化測試中，處理彈框是一項常見的任務。彈框可能包括警告、確認和提示框。Playwright 是一個功能強大的自動化測試工具，提供了處理這些彈框的靈活方法。在本文中，我們將深入探討如何使用 Python 編寫代碼來處理各種類型的彈框。

彈框的分類

彈框通常分為3種，分別為alert，confirm，promot。

alert彈框：只有信息和確定按鍵
confirm彈框：在alert彈窗基礎上增加了取消按鈕
prompt彈框：在confirm的基礎上增加了可輸入文本內容的功能

三種彈框的圖像分別如下：

出現彈框時，我們需要點擊確定，彈框才會消失，當我們使用selenium處理彈框時，通常是使用switch_to.alert來進行處理，具體代碼如下：

pythonfrom selenium import webdriver
 
driver = webdriver.Chrome()
driver.switch_to.alert.accept() #確定、同意；三種彈窗都可使用
driver.switch_to.alert.dismiss() #取消、不同意；confirm和prompt彈窗中使用
title = driver.switch_to.alert.text #打印彈窗信息
alert = driver.switch_to.alert #獲取alert對象
alert.send_keys() #Prompt彈窗中輸入內容

下面，我們來看看playwright是如何處理彈框的。

dialog 事件監聽

playwright 框架可以監聽dialog事件，不管你alert 什么時候彈出來，監聽到事件就自動處理了。

當出現 JavaScript 對話框時發出，例如alert、prompt。偵聽器必須dialog.accept()或dialog.dismiss()對話框 - 否則頁面將凍結等待對話框，并且單擊等操作將永遠不會完成。

處理代碼如下：

pythonpage.on("dialog", lambda dialog: dialog.accept())

注:當沒有page.on("dialog")偵聽器存在時，所有對話框都會自動關閉。

代碼如下：

pythonpage.on("dialog", handler)

處理警告框

警告框通常用于向用戶顯示一條消息，并要求用戶采取某種操作。在 Playwright 中，我們可以使用 page.on('dialog') 方法來處理警告框。以下是一個示例：

pythonfrom playwright.sync_api import sync_playwright

with sync_playwright() as p:
    browser = p.chromium.launch()
    page = browser.new_page()
    
    def on_dialog(dialog):
        print('Dialog message:', dialog.message)
        dialog.accept()

    page.on('dialog', on_dialog)
    page.goto('https://example.com')

在這個示例中，我們定義了一個 on_dialog 函數來處理彈框。在這個函數中，我們打印出警告框的消息并接受它。

處理確認框

確認框通常用于向用戶顯示一條消息，并要求用戶確認或取消操作。在 Playwright 中，我們可以使用 dialog.accept() 或 dialog.dismiss() 來分別接受或取消確認框。以下是一個示例：

pythonfrom playwright.sync_api import sync_playwright

with sync_playwright() as p:
    browser = p.chromium.launch()
    page = browser.new_page()
    
    def on_dialog(dialog):
        print('Dialog message:', dialog.message)
        dialog.accept()

    page.on('dialog', on_dialog)
    page.goto('https://example.com')

    # Perform actions that trigger a confirm dialog
    # Your code here

在這個示例中，我們通過調用 dialog.accept() 來接受確認框。如果要取消確認框，可以調用 dialog.dismiss()。

處理提示框

提示框通常用于向用戶顯示一條消息，并要求用戶輸入文本或點擊確定按鈕。在 Playwright 中，我們可以使用 dialog.accept(prompt_text) 來接受提示框并輸入文本。以下是一個示例：

pythonfrom playwright.sync_api import sync_playwright

with sync_playwright() as p:
    browser = p.chromium.launch()
    page = browser.new_page()
    
    def on_dialog(dialog):
        print('Dialog message:', dialog.message)
        dialog.accept('Hello, Playwright!')

    page.on('dialog', on_dialog)
    page.goto('https://example.com')

    # Perform actions that trigger a prompt dialog
    # Your code here

在這個示例中，我們通過調用 dialog.accept('Hello, Playwright!') 來接受提示框并輸入文本。

總結

通過本文，我們了解了如何使用 Python 編寫代碼來處理不同類型的彈框。Playwright 提供了簡潔而強大的 API，使得處理彈框變得非常容易。開始使用 Playwright，并加快您的 Web 自動化測試流程吧！

在線咨詢

上一篇：「前端小技巧」用CSS隱藏元素的幾種方法
下一篇：教你從頭學前端開發-第一個網頁（一）

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商