Question

我想在div参数值的特定位置插入当前访问的网页的名称。

例如，在下面的代码中，我想在看到current_page_pathname的地方插入页面名称（路径名）。

<div data-url="https://somedomain.com?source=current_page_pathname"></div>

我已经考虑过使用var current_page_pathname=window.location.pathname;，但是我不知道如何在需要的地方插入var值。

如果当前访问的网页是https://en.wikipedia.org/wiki/Sloth，我希望data-url的值是：

<div data-url="https://somedomain.com?source=/wiki/Sloth"></div>

这可能吗？

我会以错误的方式处理吗？我愿意接受任何可行的解决方案。

Answer 1

您可以使用javascript / jQuery动态地做到这一点

$('#urlholderlink').attr('href', 'https://somedomain.com?source=' + window.location.pathname);
$('#urlholder').attr('data-url', 'https://somedomain.com?source=' + window.location.pathname);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a id="urlholderlink">My link</a>
<div id="urlholder">My div</div>

注意：在此代码段中，URL是相对于嵌入式文档的。

Answer 2

使用嵌入页面的网址：

https://stacksnippets.net/js

以下演示说明了如何使用JavaScript：

( function() {

let w = window;
let d = document;

let target_url = "https://www.example.com?source";
let curr_page_path = w.location.pathname;
 
// shortcut to access elements
let $ =  id =>  d.getElementById( id );
 
let atag = $("urlholderlink");
let div  = $("urlholder");

w.onload = function(){
  atag.href = (div.dataset.url =
      target_url + curr_page_path);

  let message = "DIV attribute data-url: " + div.dataset.url;
  message += '\n<a href="' + atag.href + '">';

  div.onclick = function() {
    console.log( message );
    atag.className="viewable";
    this.onclick=function(){
      return null; //disable div click
    }; // this.onclick 
  };// div.onclick 
}; // w.onload
})();// IFFE

a {
  float: right;
  padding-right:80px;
  width:50px;
  color:#00f;
  visibility:hidden;
}

a:hover {
   text-decoration:overline;
}

#urlholder {
  cursor:default;
  margin-top:10%;
  color:lime;
  background:#000;
  width: 100px;
  height: 36px;
  font: 32px Arial,Helvetica;
  border: 15px outset #060;
}

#urlholder:hover {
  color:cyan;
}


.viewable {
 visibility:visible;
}

<a id="urlholderlink">My link</a>

<div id="urlholder" title="click for more info">My div</div>

代码利用Window的onload事件来调用处理程序，即访问A和DIV元素的匿名函数。它将data-url属性添加到DIV元素，并使用HTML5 datalist API设置其值。该分配表达式的值又被分配为A元素的href属性的值。

设置这些值的关键仅在于将target_url与curr_page_path串联；

立即调用的函数表达式（IIFE）语法的来源来自：https://stackoverflow.com/a/1843504/701302

CSS当然是可选的-有趣地添加了它。

Answer 3

您可以使用纯JavaScript来实现。

查询所有具有data-url属性且包含placholder current_page_pathname的div。为此，document.querySelectorAll('[data-url*="current_page_pathname"]')
使用forEach遍历每个节点。使用getAttribute('data-url')和setAttribute('data-url', newValue)更新属性，并使用String.prototype.replace()用当前URL替换占位符。

const placeholder = 'current_page_pathname';

document.querySelectorAll(`[data-url*="${placeholder}"]`).forEach(node => {
  const path = window.location.pathname;
  const dataUrl = node.getAttribute('data-url').replace(placeholder, path);
  node.setAttribute('data-url', dataUrl)
});

function show(e) {
  console.log(e.getAttribute('data-url'));
}

div[data-url] {
  cursor: pointer;
  border: 1px solid black;
  padding: 5px;
  margin: 5px;
}

<div data-url="https://somedomain.com?source=current_page_pathname" onclick="show(this)">
  Click me to view my data-url attribute
</div>
<div data-url="https://somedomain.com?source=current_page_pathname" onclick="show(this)">
  Click me to view my data-url attribute
</div>

有没有办法将当前页面的路径名插入div类参数值？

3 个答案: