Getting current URL with JavaScript then using derived value in html code

Question

I have a simple question, but being a JavaScript newbie, I have no idea how to implement my findings.

I found a little snippit that uses JavaScript to pull in the current URL, and load that value to a variable:

<script type="text/javascript" language="javascript">
  window.onload = function () {
    var currentUrl = window.location.href;
  }
</script>

so the value of currentUrl holds the current page's URL.

What I need to know is how to use that value within my page's HTML. The application I am attempting to use this for is the facebook comments plugin.

<div class="fb-comments" data-href="**currentUrl**" data-width="470" data-num-posts="2"></div>

Frank van Puffelen · Accepted Answer · 2012-12-17 20:55:39Z

5

Give your div an id:

<div id="fb-comments" class="fb-comments"

Then you can set the data-href like this:

window.onload = function () {
    var currentUrl = window.location.href;
    document.getElementById("fb-comments").setAttribute("data-href", currentUrl);
}

answered Dec 17, 2012 at 20:55

Frank van Puffelen

603k85 gold badges896 silver badges869 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

David Thomas · Accepted Answer · 2012-12-17 21:03:19Z

2

In this particular question, I think:

// gets all elements of class-name 'fb-comments' from the document
var fbComments = document.getElementsByClassName('fb-comments');

// iterates through each of those elements
for (var i = 0, len = fbComments.length; i<len; i++) {
    // and sets the 'data-href' attribute to be the value held by the
    // the currentUrl variable
    fbComments[i].setAttribute('data-href', currentUrl);
}

For browsers that don't implement getElementsByClassName():

// gets all div elements within the document
var divs = document.getElementsByTagName('div');

// iterates through each of those div elements, and
for (var i = 0, len = divs.length; i<len; i++) {
    // if the class attribute contains a string equal to 'fb-comments'
    if (divs[i].className.indexOf('fb-comments') !== -1) {
        // sets the 'data-href' attribute to be equal to the value held
        // by the currentUrl variable
        divs[i].setAttribute('data-href', currentUrl);
    }
}

References:

edited Dec 17, 2012 at 21:03

answered Dec 17, 2012 at 20:56

David Thomas

254k53 gold badges382 silver badges421 bronze badges

3 Comments

Alex Ritter Over a year ago

Should I leave the data-href="" portion blank then? The comments plugin is telling me "the plugin requires an href parameter."

David Thomas Over a year ago

This partiuclar JavaScript will simply set the attribute to whatever value is held in the variable. If a value's already there this will simply over-write it, so you can set it to a placeholder value if you want, typically #, but it's up to you.

Alex Ritter Over a year ago

Thanks for the tip David. My HTML editor was removing the field because I was leaving it blank. Inserted a "#", an voiala

Lix · Accepted Answer · 2012-12-17 20:56:12Z

0

You might be able to do something like this -

<div id="myCommentBox" class="fb-comments" data-href="**currentUrl**" data-width="470" data-num-posts="2"></div>

var element = document.getElementById('myCommentBox');
element.setAttribute("data-href", currentUrl);

Notice that I gave the <div> an id attribute so that it would be easy to locate with getElementById. Remember that you'll need to call FB.XFBML.parse() once you change the data-href attribute in order to re-render the comment box.

answered Dec 17, 2012 at 20:56

Lix

48.2k12 gold badges107 silver badges134 bronze badges

Collectives™ on Stack Overflow

Getting current URL with JavaScript then using derived value in html code

3 Answers 3

Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related