Question

我有一个简单的问题，但作为一个JavaScript新手，我不知道如何实现我的发现。

我发现了一个使用JavaScript来引入当前URL的snippit，并将该值加载到变量中：

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

因此currentUrl的值保存当前页面的网址。

我需要知道的是如何在页面的HTML中使用该值。我试图使用它的应用程序是facebook评论插件。

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

Answer 1

为您的div提供ID：

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

然后你可以像这样设置data-href：

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

Answer 2

在这个特殊问题中，我认为：

// 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);
}

对于未实现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);
    }
}

参考文献：

Answer 3

你可能会做这样的事情 -

<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);

请注意，我提供了<div> id属性，以便使用getElementById轻松找到它。请注意，更改data-href属性后，您需要调用FB.XFBML.parse()才能重新呈现评论框。

使用JavaScript获取当前URL，然后在html代码中使用派生值

3 个答案: