Question

我关注此http://www.w3schools.com/howto/howto_html_include.asp 包括html

所以有一个html文件，即sidebar.html，它包含在各种html文件中。

我想在sidebar.html

中保留以下共享代码

<a id="fbshare" href="" target="_blank">  
    <img src="https://example1.com/facebook.png" alt="Facebook" />
</a>

但是因为有超过200页，所以我想根据该html页面的url放置href。

所以我在main.js中使用这个脚本

jQuery(document).ready(function() {
var share_url = document.URL;       

document.getElementById( "fbshare" ).href = 'http://www.facebook.com/sharer.php?u=' + share_url;
});

这是我的一个html页面的代码

<!DOCTYPE html>
<head>
</head>
<body>
    <header w3-include-html="header.html"></header>

    <main>

        <div id="main-slider" class="carousel slide carousel-fade" data-ride="carousel">
            <div class="container">                 
                    <aside class="col-md-3 col-sm-4" w3-include-html="sidebar.html"></aside>

                </div>
            </div>

    </main>
    <footer w3-include-html="footer.html"></footer>


    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/bootstrap.js"></script>
    <script type="text/javascript" src="js/owl.carousel.js"></script>
    <script type="text/javascript" src="js/w3data.js"></script>



     <script>
        w3IncludeHTML();
    </script> 
    <script type="text/javascript" src="js/main.js" defer></script>
</body>
</html>

但编写href的脚本无效..

我坚持这个。请帮助

Answer 1

使用window.location.href获取当前页面的网址。然后你可以为你的元素设置href属性。

试试这个：

jQuery(document).ready(function() {
var share_url = window.location.href;       

document.getElementById( "fbshare" ).setAttribute('href','http://www.facebook.com/sharer.php?u=' + share_url);
});

编辑：

在检查了您正在使用的w3库之后，它似乎非常有限，您应该考虑不使用它。在加载内容时，它不提供任何运行回调的功能。因此，在处理main.js时，元素可能尚未加载a。但是，由于您使用的是jQuery，因此可以使用.load函数。就这样：

$( "header" ).load( "header.html", function() {
  $(this).find('a').attr('href', 'http://www.facebook.com/sharer.php?u='+window.location.href);
});

当然，从header（以及其他人）中删除include指令，并使用load函数根据需要加载它们。

脚本不适用于包含的html

1 个答案: