简体   繁体   English

如何动态更改href属性

[英]How to dynamically change href attribute

I'm trying to make a little website browsable both online and offline using only html, css and a little of jquery\\javascript. 我正在尝试仅使用html,css和少许jquery \\ javascript使在线和离线浏览一个小的网站。 Hence I'm using all relative paths and everything works fine unless I came to the issue to load a custom menu in all my pages with a little smart jquery include. 因此,我使用了所有相对路径,并且一切正常,除非我遇到了在我的所有页面上加载带有小巧jquery include的自定义菜单的问题。

However since my menu.html is loaded in different pages located in different subdirectories of the tree structure I am wondering what's the smartest way to write down the href links of the different voices in the menu. 但是,由于我的menu.html加载在树结构的不同子目录中的不同页面中,所以我想知道在菜单中写下不同声音的href链接的最明智的方法是什么。

I initially started using all absolute paths in the menu.html, but of course it just works only online or offline based on which root domain I use in the absolutes paths (either http://mywebsite.com/ or file:///D:myfolder/etc). 我最初开始使用menu.html中的所有绝对路径,但是,根据我在绝对路径中使用的根域( http://mywebsite.com/或file:///),它当然只能在线离线使用D:myfolder / etc)。

Of course also using the / at the beginning of a link works only online, since locally the / stands for the drive letter where the websites' folder is placed and it will work if and only if the website's folder is saved in the highest path like as D:/myWenbsite. 当然,在链接的开头也使用/只能在线使用,因为在本地,/代表放置网站文件夹的驱动器号,并且仅当网站文件夹保存在最高路径(例如作为D:/ myWenbsite。 I'd like to make something more adaptable regardless of the local path. 无论本地路径如何,我都希望使某些东西更具适应性。

The best way in my opinion is to use relative URL's from the root. 我认为最好的方法是从根目录使用相对URL。 For example in your menu.html file when you reference jquery you can do the following: 例如,在引用jquery时,在menu.html文件中,您可以执行以下操作:

/javascript/jquery.min.js

Adding the beginning '/' makes it so that the path always starts from the root of the domain no matter where your html is at in your directory. 添加开头的'/'可以使该路径始终从域的根开始,无论您的html在目录中位于何处。

If you used: 如果您使用过:

javascript/jquery.min.js

That means in whatever directory your menu.html file is in, a folder for javascript would also need to exist and that is not generally wanted. 这意味着在您的menu.html文件所在的目录中,都需要存在一个javascript文件夹,而通常不需要这样做。

Using the <base> command within a little script to change it solved my issue. 在小脚本中使用<base>命令进行更改可以解决我的问题。

Here is an example: 这是一个例子:

<head>
<!-- Here a direct path is need to firstly load jquery -->
    <script type = "text/javascript" src = "../include/js/jquery-1.10.2.min.js"></script>
    <base id="host" href="" />
    <script>
        /* Where am I? */
        here = window.location.href;
        hereIndex = here.indexOf('temp-test');

        /* make substring from root till temp-test/ */
        newPathname = here.substring(0, hereIndex+10); //+10 to consdier also temp-test/

        $("#host").attr("href", newPathname);
    </script>
</head>

Don't know if there is a better way to do it. 不知道是否有更好的方法。

Anyway even if the page renders correctly in the console log I still get errors on every relative path I have GET file:///D:/temp-test/core/image/temp1.jpg net::ERR_FILE_NOT_FOUND however for instance, this image is instead properly loaded. 无论如何,即使页面在控制台日志中正确呈现,我在具有 GET file:///D:/temp-test/core/image/temp1.jpg net::ERR_FILE_NOT_FOUND 每个相对路径上仍然会出错,但是例如而是正确加载了图像。 So what's up here with the base tag? 那么基本标记在这里呢? It is kinda of not getting recognized but it works.. 这有点没有得到认可,但确实有效。

Further investigation is needed for me. 我需要进一步调查。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM