添加一个？和所有出站链接的另一个字符串

Question

在此代码中，我正在修改所有传出链接。我已经添加 ”？”成功地。我还想添加一个动态字符串，我从 URL 中获取但失败了。这是我的代码：

fetch('https://httpbin.org/encoding/utf8')
  .then((response) => {
    return response.text();
  })
  .then((text) => {
    document.getElementById("MyFetchedString").innerHTML = text.slice(0, 10);
      });
document.addEventListener( "DOMContentLoaded", modify_outbound_links);

function modify_outbound_links(){
    anchors = document.getElementsByTagName('a');
    for (let i = 0; i < anchors.length; i++) {
        let p = anchors[i].href;
        if (p.indexOf('example.com') === -1) {
        //How do i append the fetchedText here? 
            anchors[i].href = p + (p.indexOf('?') != -1 ? "&" : "?") + 'FetchedText'; 
        }
    }
}

<!DOCTYPE html>
<html>
<head>
  <title>My Website</title>
  </head>

<body>

  <h2>My First Web Page</h2>
  <p>My First Paragraph.</p>

  Modify all outbound links.<br>

 <p><a href="https://google.com/">Google.com</a></p>
<p><a href="https://yahoo.com/">Yahoo.com</a></p>
<p><a href="https://example.com/">mydomain.com</a></p>

<p id="MyFetchedString"></p>

</body>

如何在此处附加 fetchedText：

anchors[i].href = p + (p.indexOf('?') != -1 ? "&" : "?") + '**I WANT THE FETCHED TEXT HERE**';

Answer 1

通过这4个步骤就可以得到想要的功能-

删除文档加载事件，因为包含提取时不需要。

document.addEventListener( "DOMContentLoaded", modify_outbound_links);

This event listener interferes with fetch. It can be removed.

将获取的文本提取到名为 fetchedText 的变量中 'fetch request'
将fetchedText作为参数传递给modify_outbound_links函数
将 fetchedText 附加到 modify_outbound_links[=36= 内的出站 link ] 函数

工作代码：

<!DOCTYPE html> <html> <head> <title>My Website</title> </head> <body> <h2>My First Web Page</h2> <p>My First Paragraph.</p> Modify all outbound links. <br> <p><a href="https://google.com/">Google.com</a></p> <p><a href="https://yahoo.com/">Yahoo.com</a></p> <p><a href="https://example.com/">mydomain.com</a></p> <p id="MyFetchedString"></p> <script> fetch('https://httpbin.org/encoding/utf8') .then((response) => { return response.text(); }) .then((text) => { console.log("Response from httpbin = " + text) var fetchedText = text.slice(4, 16) document.getElementById("MyFetchedString").innerHTML = fetchedText modify_outbound_links(fetchedText) }) function modify_outbound_links(fetchedText) { anchors = document.getElementsByTagName('a') for (let i = 0; i < anchors.length; i++) { let p = anchors[i].href if (p.indexOf('example.com') === -1) { //How do i append the fetchedText here? anchors[i].href = p + (p.indexOf('?') != -1 ? "&" : "?") + fetchedText; } } } </script> </body> </html>

输出

My First Web Page My First Paragraph.

Modify all outbound links.

Google.com (link = https://google.com/?Unicode%20Demo)

Yahoo.com (link = https://yahoo.com/?Unicode%20Demo)

mydomain.com (link = https://example.com/)

Unicode Demo

添加一个？和所有出站链接的另一个字符串

Add a ? and another string to all outbound links

html

javascript

location-href