Question

我们迫切需要帮助编写一个小代码，允许您获取当前页面URL和href =“parm”中的参数，并通过用斜杠连接两者来创建链接。

我们需要这样做的原因是因为我们需要相对于当前页面的链接。我们正在使用的CMS系统从URL末尾删除尾部斜杠。

这是一个问题，因为如果你在一个页面 domain.com/fruit/apple

并创建一个链接，例如href =“calories”或href =“./ calories” 它将指向domain.com/fruit/calories

相反，我们希望它指向 domain.com/fruit/apple/calories

哪一个与当前页面有关。

我们不想改变CMS的工作方式，因此需要JS解决方案。

下面你可以看到我们想要完成的一个例子，但这仅适用于一个链接。

<a href="home" id="relurl" target="_blank" title="This is a relative link!">link</a>

启动JS

var x = window.location.href; // Current page URL
var link = document.getElementById("relurl"); // store the element
var curHref = link.getAttribute('href'); // Get HREF paramter
link.setAttribute('href', x + "/"+ curHref);

结束JS

这个想法是每次使用id =“relurl”的链接时建立相对链接。

根据前面的示例，此链接：a href =“home”id =“relurl”target =“_ blank”title =“这是相对链接！”＆gt;链接

在此页面：domain.com/fruit/apple

应该指向domain.com/fruit/apple/home

表示链接结构是currentpageURL + / + href

一个页面可能有多个相对链接。

感谢您的帮助。

Answer 1

虽然可以只使用链接中的相对网址（使用var x = window.location.href; // Current page URL var link = document.getElementById("relurl"); // store the element var curHref = link.getAttribute('href'); // Get HREF paramter link.setAttribute('href', x + "/" + curHref);），但问题是您使用的是重复的ID（导致无效的标记）。您可以使用 W3C Markup Validation Service 测试您的有效标记。

如果您有重复的ID，则JavaScript仅适用于第一个元素。这可以在以下内容中看到：

<a href="home" id="relurl" target="_blank" title="This is a relative link!">Working Link</a>
<br />
<a href="home" id="relurl" target="_blank" title="This is a relative link!">NOT Working</a>

var x = window.location.href; // Current page URL
var links = document.getElementsByClassName("relurl"); // store the elements
for (var i = 0; i < links.length; i++) {
  var curHref = links[i].getAttribute('href'); // Get HREF paramter
  links[i].setAttribute('href', x + "/" + curHref);
}

要解决此问题，您应该为链接使用类而不是ID。然后，您可以使用 document.getElementsByClassName 来选择元素。请注意，这会返回 NodeList 元素集合，因此您需要在循环内设置新网址，如下所示：

<a href="home" class="relurl" target="_blank" title="This is a relative link!">Working Link</a>
<br />
<a href="home" class="relurl" target="_blank" title="This is a relative link!">Another Working Link</a>

SELECT USER
     , SYSDATE
     , TO_CHAR (SYSDATE, 'HH24:MI:SS AM')
           AS timeinmin
     , (SELECT SUM (samplesize)
          FROM ind$)
           AS samplerate
     , (SELECT MAX (banner)
          FROM v$version)
           AS data_basetype
     , (SELECT UTL_INADDR.get_host_name
          FROM DUAL)
           AS machine_name
     , (SELECT UTL_INADDR.get_host_address
          FROM DUAL)
           AS ip_address
     , (SELECT USER
          FROM DUAL)
           AS logged_in_user
     , (SELECT name
          FROM v$database)
           AS database_name
     , (SELECT file_name sql_database_db_filetype
          FROM dba_data_files
         WHERE file_id = (SELECT MIN (file#)
                            FROM sys.file$))
           AS sql_database_db_filetype
     , (SELECT MAX (read_latency) AS oracle_database_db_readlatency
          FROM v_$iostat_network)
     , (SELECT MAX (write_latency) AS sql_database_db_writelatency
          FROM v_$iostat_network)
     , (SELECT (SUM (read_latency) + SUM (write_latency)) AS sql_database_db_latency
          FROM v_$iostat_network)
  FROM DUAL;

SELECT SUM (physical_reads_total) AS oracle_db_num_of_reads, SUM (physical_writes_total) AS oracle_db_num_of_writes
  FROM dba_hist_seg_stat;

SELECT   (SELECT SUM (bytes) / 1024 / 1024 / 1024 data_size
            FROM dba_data_files)
       + (SELECT NVL (SUM (bytes), 0) / 1024 / 1024 / 1024 temp_size
            FROM dba_temp_files)
       + (SELECT SUM (bytes) / 1024 / 1024 / 1024 redo_size
            FROM sys.v_$log)
       + (SELECT SUM (block_size * file_size_blks) / 1024 / 1024 / 1024 controlfile_size
            FROM v$controlfile)
           "Size in GB"
  FROM DUAL;

希望这有帮助！：）

Answer 2

这将更新当前页面中的所有链接：

const updateNode = node =>
  node.href = `${window.location}/${node.href}`

document.querySelectorAll('a').forEach(updateNode)

在缺少尾部斜杠的页面中构建相对URL /

2 个答案: