JAVASCRIPT：如何获取页面中链接的 URL？答案

【问题标题】：JAVASCRIPT: how to get the URL of a link in a page?JAVASCRIPT：如何获取页面中链接的 URL？
【发布时间】：2014-04-17 07:24:47
【问题描述】：

如何获取页面中链接的URL？

如何获取 iframe 的当前 src？

如果链接的 URL 与 iframe 中的 src 相同，我想要为页面中的链接添加特殊的背景颜色。

也就是说，当您单击链接时，它会针对 iframe（当然要更改其 src）。我想要改变链接的背景颜色。当我单击下一个针对 iframe 的链接时，我还希望它变回来。

我认为我需要 javascript 来执行此操作。不过我是个菜鸟，所以我不确定如何评估链接的 URL，以便我可以根据 iFrame 的源对其进行测试，并使用“if”语句更改链接的背景。

我想我可以使用 onClick 事件来更改背景颜色（并恢复所有相邻链接的背景颜色）而不读取 iframe src，但这是最优雅的方式吗？（总共大约有 10 个链接！..）

这是我编写的一些代码，只是为了看看我是否可以使用 javascript 以某种方式读取链接中的 url，但它对我不起作用。

<script type="text/javascript"> 
var myLink = document.getElementById("myLink");
var myURL = myLink.URL; 
alert(myURL);
</script>

警报只是没有弹出。

任何帮助表示赞赏。谢谢。

【问题讨论】：

您可能犯了一个简单的错误：指定 URL 的属性称为“href”，而不是“URL”。
你试过var urlOfMyPage = document.url;

标签： javascript url iframe

【解决方案1】：

使用这个：

var myLink = document.getElementById("myLink");
var myURL = myLink.href; 
alert(myURL);

HREF 而不是 URL。

【讨论】：

【解决方案2】：

获取iframe的src

<iframe id="myIframe" src="http://www.example.com"></iframe>

var iframe = document.getElementById('myIframe');
var iframeSrc = iframe.src;

【讨论】：

【解决方案3】：

获取“myLink”元素的属性：

var myLink = document.getElementById("myLink");
// for href attribut
var AttributValue = myLink.getAttribute("href");
alert(AttributValue);

// for class attribut
var AttributValue = myLink.getAttribute("class");

....

【讨论】：

【解决方案4】：

首先，您需要正确调试它。无论您是否获得网址，Alert() 都应该始终有效，所以用chrome，试试你的代码，右键->检查元素->控制台，看看有没有报错？你也可以设置断点来跟踪你的代码，希望这会有所帮助！

【讨论】：

也感谢您的回答。它帮助我弄清楚为什么警报不会弹出。

【解决方案5】：

我会这样做的方式：

给所有的链接一个类，如下：

HTML

...
<a href="XYZ" onclick="javascript:void(0)" class="navLink">Link A</a>
...

然后让您的初始化函数“initLinks()”遍历这些链接，并将它们的“onclick”事件处理程序设置为处理点击的函数（“onClickLink()”）。
该函数将重置先前活动链接的背景颜色并设置新链接的背景颜色。此外，它将当前链接存储为下一个执行的前一个活动链接。此外（最重要的），它设置 iframe src。
'this'表示触发函数的元素，所以对应的''链接。

JAVASCRIPT

window.onload = initLinks; // let initLinks() be executed when page has loaded

var prevActiveLink; // previously active link

function initLinks(){ // does all the startup work for the links

var allLinks = document.getElementsByClassName('navLink'); // get all links (that have your classname)
for (var i=0, i<allLinks.length, i++){ // loop through them
allLinks[i].onclick = onClickLink; // set their onclick event to your function
}
prevActiveLink = allLinks[0]; // Set the first link to the previously active link (so that onClickLink() doesn't throw 'undefined' error at first execution)
allLinks[0].onclick(); // Select the first link at start
}

function onClickLink(){
document.getElementById('myIframe').src = this.href; // Set iframe src

prevActiveLink.backgroundColor = "white"; // set previously active link's background-color back to white
this.backgroundColor = "red"; // set new active link's background-color to your color

prevActiveLink = this; // set current active link to next executions previous active link
}

【讨论】：