用于动态更改超链接的 JavaScript 无法正常工作

Question

我尝试改编的Javascript根本不起作用。如何让它发挥作用？

问题:在我的工作场所，我们有很多超链接，我必须单击它们才能打开票号。但所有票号都超链接到一个新网站，该网站速度非常慢，而且我看不到该问题得到解决。有一个旧网站，速度非常快，我希望超链接只将我引导到那里。

例如链接引导我前往

https://companysachinperf.com/newweb/TicketDetnumber.jspx?tNumber=7-12345

但我希望每当我点击它时它都会引导我到一个新链接 https://oldwebe.company.com/xyz/Ticketnumber.jspx?tNumber=7-12345

注意:

1.两个网站的底层数据库是相同的。

2.company.com 和 oldwebe.comapny 仅用于说明目的。

3.7-12345 是我的示例中的票号，但在给定的 html 页面上可能有很多这样的票，一旦我单击其中任何一个，旧网站就会打开该票号。

4.这是我第一次开始用 Javascript 编码。

尝试的解决方案(不起作用)。我将此脚本放入 Tamper Monkey

var href = "https://companysachinperf.com/newweb/TicketDetnumber.jspx?tNumber=7-12345"
var oldWebsiteLink = "https://oldwebe.company.com/xyz/Ticketnumber.jspx?tNumber=@id"
var elems = document.querySelectorAll('.comp-link');

for (var i=elems.length; i--;) {
    elems[i].addEventListener('click', function(e) {
        e.preventDefault();
        var hrefVal = this.getAttribute('href');
        var id = hrefVal.substr(hrefVal.lastIndexOf('/') + 1);
        var newLink = oldWebsiteLink.replace("@id", id);
        console.log(newLink);
        window.open(newLink,'_blank');

    }, false);
}

Answer 1

一种方法如下:

// here we use the Arrow syntax form of an Immediately-Invoked Function
// Expression ('IIFE'); this function is encountered and then immediately
// invoked by the browser:
// (function(){ /*...code...*/ })() or
// (()=>{ /*...code...*/})()
(() => {

  // using document.querySelectorAll('a') to retrieve a NodeList
  // of all <a> elements in the document, and passing that
  // NodeList to Array.from() in order to use Array methods
  // on the discovered Nodes:
  let links = Array.from(document.querySelectorAll('a')),

      // the new path we want to create:
      newPath = '/xyz/Ticketnumber.jspx';

  // here we filter the links Array, again using an Arrow function:
  links.filter(

    // the first argument of the Array.prototype.filter() method
    // is always a reference to the current array-element of the
    // Array (here it's named 'anchor'); and this is passed into
    // the function:
    (anchor) => {

      // if the anchor.hostname is exactly-equal to the supplied
      // String:
      if (anchor.hostname === 'companysachinperf.com') {

        // we update/set the 'data-oldhref' attribute of the
        // current <a> element to the current value of the href
        // attribute (this is for demonstration purposes in the
        // demo, and is irrelevant to the performance/functionality;
        // it can be removed:
        anchor.dataset.oldhref = anchor.href;

        // we update the <a> element's hostname property to the
        // value of the supplied String:
        anchor.hostname = 'oldwebe.company.com';

        // we update the path to the new path:
        anchor.pathname = newPath;
      }
    })
// here we close the function statement, the parentheses that follow
// the function (the '()') can contain any arguments you wish to supply
// and those arguments will be available to the function; however they
// would need to be declared within the opening parentheses of the
// Arrow function:
/*    ((argumentA,argumentB) => {
        ...code...
      })(document.body,somethingElse);
*/
})();

(() => {
  let links = Array.from(document.querySelectorAll('a')),
    newPath = '/xyz/Ticketnumber.jspx';
  links.filter(
    (anchor) => {
      if (anchor.hostname === 'companysachinperf.com') {
        anchor.dataset.oldhref = anchor.href;
        anchor.hostname = 'oldwebe.company.com';
        anchor.pathname = newPath;
      }
    })
})();

/*
  irrelevant to the functionality and for demo purposes only:
*/

a::before {
  content: attr(href);
}

a::after {
  display: block;
  content: '\A(Used to be: ' attr(data-oldhref) ')';
}

<a href="https://companysachinperf.com/newweb/TicketDetnumber.jspx?tNumber=7-12345" data-oldhref=""></a>

JS Fiddle demo .

要将功能包装到 Tampermonkey 脚本中，请使用我自己安装的 Tampermonkey:

// ==UserScript==
// @name         Modifying links
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  Modifying links from one hostname to another
// @author       David Thomas: https://stackoverflow.com/a/53693814/82548
// @match        https://companysachinperf.com
// @grant        none
// ==/UserScript==

(function() {
    'use strict';
    (() => {
        let links = Array.from(document.querySelectorAll('a')),
            newPath = '/xyz/Ticketnumber.jspx';
        links.filter(
            (anchor) => {
                if (anchor.hostname === 'companysachinperf.com') {
                    anchor.dataset.oldhref = anchor.href;
                    anchor.hostname = 'oldwebe.company.com';
                    anchor.pathname = newPath;
                }
            })
    })();
})();

来自您的comment在问题下方:

How to adapt the code that you provided to be flexible for any ticket number. Currently it is hardcoded for 7-12345. ...How to put all the html+css+js code all in [Tampermonkey]?

不，你错了，只有一个 <a>演示中的元素，如果您查看代码票号，tNumber=12345除了 <a> 之外，绝对不会以任何方式修改或编码。元素的href属性;提供的代码(假设链接格式与您的描述匹配)将适用于任何票号，因为脚本将保持不变。

至于将 HTML 添加到 Tampermonkey:你不需要； Tampermonkey 脚本对它在相关页面中找到的 HTML 进行操作(您可以使用 Tampermonkey 脚本中的 // @match http://*/* 行来确定)。

至于使用 Tampermonkey 将 CSS 添加到页面，这很简单，例如:

// ==UserScript==
// @name         Adding Style demo
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  try to take over the world with garish color choices
// @author       David Thomas: https://stackoverflow.com/a/53693814/82548
// @match        https://stackoverflow.com/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    // create a <style> element:
    let style = document.createElement('style'),

        // find the <head> element:
        head = document.querySelector('head'),
        // define a CSS Selector:
        importantElements = 'h1 > a',
        // define a CSS property-value (note that
        // using '!important' - which ordinarily
        // shouldn't be used is used here because
        // I couldn't be bothered to increase the
        // specificity of the 'importantElement'
        // selector):
        importantColor = '#f00 !important';

    // assign an id to the created <style> element:
    style.id = 'TampermonkeyInsertedStyleElement';

    // update the text-content of the <style> element
    // using a template literal (delimited by backticks),
    // in which newlines don't require escaping and in which
    // JavaScript variables can be interpolated:
    style.textContent = `
      body { background-color: #f908; }
      ${importantElements} {color: ${importantColor};}`;

    // appending the created <style> element to the <head>:
    head.appendChild(style);
})();

引用文献:

• Array.from() .
• Array.prototype.filter()
• Arrow functions .
• document.links .
• document.querySelector() .
• document.querySelectorAll() .
• HTMLAnchorElement .
• HTMLElement.dataset .
• HTMLHyperLinkElementUtils.pathname .
• HTMLHyperLinkElementUtils.hostname .
• Immediately-Invoked Function Expresssions ('IIFE') .
• Node.appendChild() .
• Template literal .

引用书目:

• What is the (function() { } )() construct in JavaScript?