Is there a way to insert the pathname of the current page into a div class parameter value?

Question

I want to insert the name of the currently accessed webpage into a specific location in a div parameter value.

For example in the code below, I want to insert the page name (pathname) where you see current_page_pathname.

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

I've looked at using var current_page_pathname=window.location.pathname;, but I don't know how to insert the var value where I want it.

If the currently accessed webpage is https://en.wikipedia.org/wiki/Sloth, I want the data-url value to be:

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

Is this possible?

Am I going about this the wrong way? I'm open to any solution that works.

Yes you can do this, and I could answer how. But, let me ask this: why? What are you trying to accomplish by storing something back into the html in this way? — Michael McQuade, Apr 09 '19 at 23:21
Thank you for asking @MichaelMcQuade! I am using the `current_page_pathname` as an identifier. When the user clicks a button on the web page, I want to record that event and identify that it happened on the currently accessed page. This is a format required by an integration I'm using. Does that help? Thank you again! — jhaaaa, Apr 10 '19 at 18:21

score 2 · Accepted Answer · answered Apr 09 '19 at 23:38

2

You can do it dynamically with 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>

NB : in this snippet the url is relative to embedded document.

answered Apr 09 '19 at 23:38

sinsedrix

3,341
3
20
38

1

Note that jQuery has a `.data()` method that you can use instead of `.attr()` ... `element.data('url', 'https://somedomain.com/etc.../');` will create a `data-url` attribute. – Stephen P Apr 11 '19 at 00:18
Thank you so much @sinsedrix! This worked perfectly. I'm a total newbie -- so I appreciated your straightforward approach. – jhaaaa Apr 11 '19 at 17:38

slevy1 · Answer 2 · 2019-04-13T06:03:46.567

Using the url of the embedded page:

https://stacksnippets.net/js

the following demo illustrates how you may do so with 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>

The code takes advantage of the Window's onload event to call a handler, namely an anonymous function that accesses the A and DIV elements. It adds a data-url attribute to the DIV element and sets its value, using the HTML5 datalist API. The value of that assignment expression is in turn assigned as the value for the A element's href attribute.

The crux to setting these values simply involves concatenating target_url with curr_page_path;

The source for the immediately invoked function expression (IIFE) syntax comes from: https://stackoverflow.com/a/1843504/701302

The CSS is, of course optional -- added it for fun.

instead of polluting `document` with a `gt` method, rather create some scoped reusable helper function — Roko C. Buljan, Apr 10 '19 at 00:38

score 0 · Answer 3 · answered Apr 10 '19 at 07:50

You can do this with plain JavaScript.

Query all div having a data-url attribute containing the placholder current_page_pathname. For this use document.querySelectorAll('[data-url*="current_page_pathname"]')
Use forEach to iterate over each node. Use getAttribute('data-url') and setAttribute('data-url', newValue) to update the attribute, and use String.prototype.replace() to replace the placeholder by the current 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>

Is there a way to insert the pathname of the current page into a div class parameter value?

3 Answers3