如何使一些代碼僅在`.html`網頁上運行？

Question

我有一些要在mywebsite.com/x.html上運行的代碼（其中x可以是任何東西）。

下面的代碼（我希望）將在網頁上找到ID為“ mybutton”的按鈕，並在延遲1秒后自動單擊它：

<script>
  window.onload = function() {
      setTimeout('document.getElementById('mybutton').click()', 1000);
  }
</script>

我用Google搜索並找到了Tampermonkey Chrome擴展程序，但是唯一的問題是我不知道如何僅在上述特定網頁上運行它。

我只是將代碼拍到Tampermonkey提供的示例布局的末尾，並得到了以下信息：

// ==UserScript==
// @name         My Fancy New Userscript
// @namespace    http://your.homepage/
// @version      0.1
// @description  enter something useful
// @author       You
// @match        http://website.com
// @grant        none
// ==/UserScript==

<script>
  window.onload = function() {
      setTimeout('document.getElementById('mybutton').click()', 1000);
  }
</script>

如何使它在開頭提到的特定網頁上運行？

Answer 1

幾件事：

1. 要將操作限制為僅.html頁 ，請檢查location.pathname （請參見下文）
   或使用@include 。 例如：

    // @include http://website.com/*.html 

   為了提高精度和性能，我建議使用@match而不是@include 。

2. @match指令的末尾幾乎總是需要通配符 。 例如：

    // @match http://website.com/* 

   請注意，通配符在@include更靈活，但在“ @match ”中更“安全”且執行速度更快。

3. 您不能在用戶<script> 放置直接HTML標記 （如<script> 。 無論如何，在這種情況下根本不需要它。

4. 用戶腳本中很少需要window.onload 。 在大多數情況下，默認情況下，用戶腳本會在理想時間觸發。

5. 不要在setTimeout 使用“ eval”字符串 。 如果存在問題，就會遇到性能，故障排除和安全問題。
   該問題的setTimeout用法包含了其中的大多數，以及語法錯誤。

6. 直接的.click()調用有時會起作用，而很多時候卻不行 。
   如果不起作用， 請發送click事件 。

7. 避免使用任意計時器。 EG： setTimeout(..., 1000);
   這是“定時炸彈”代碼的一種形式。 有時會起作用。 其他時間，頁面將被延遲。 當它起作用時，它可能會使腳本的運行速度大大降低。
   使用可識別AJAX的實用程序 。 請參見下面的代碼。

---

綜上所述，使用jQuery和標准實用程序既節省工作又提高魯棒性，您的腳本將如下所示：

// ==UserScript==
// @name     _Auto click the X button on Y pages
// @match    http://website.com/*
// @require  http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js
// @require  https://gist.github.com/raw/2625891/waitForKeyElements.js
// @grant    GM_addStyle
// ==/UserScript==
/*- The @grant directive is needed to work around a design change
    introduced in GM 1.0.   It restores the sandbox.
*/

//--- Does the *path* part of the URL end in `.html`?
if (/\.html$/i.test (location.pathname) ) {
    waitForKeyElements ("#mybuttonID", clicktargetButton);

    function clicktargetButton (jNode) {
        var clickEvent  = document.createEvent ('MouseEvents');
        clickEvent.initEvent ('click', true, true);
        jNode[0].dispatchEvent (clickEvent);
    }
}

Answer 2

您可以使用星號作為通配符來定義將運行Tampermonkey代碼的網頁。
因此，這使得它可以在您網站的任何子目錄上工作：

// @match   http://www.mywebsite.com/*

要使其僅與html頁面一起使用，請更改通配符：

// @match   http://www.mywebsite.com/*.html

Answer 3

您可以使用以下代碼通過純JavaScript獲取當前的網址段：

var url = window.location.pathname.split( '/' );

因此，如果您的鏈接是mywebsite.com/about，則URL將是URL [1]

您可以定義要在其中執行代碼的頁面數組，然后使用當前網址進行檢查

var url = window.location.pathname.split( '/' );
var pages = ['home', 'about', 'services'];

for(var i=0; i<pages.length; i++) {
    if(pages[i] === url[1]) {
        // execute your code
    }
}