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

如何获取iframe的当前src？

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

也就是说，当你点击链接时，它的目标是iframe（当然，改变它的src）。我想链接的背景颜色改变。我也希望当我点击下一个以iframe为目标的链接时，它会改回来。

我在想，我将需要JavaScript来做到这一点。尽管我是一个noob，所以我不确定如何评估链接的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>

警报不会弹出。

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

来源

2014-03-12 user1700512

你可能已经做了一个简单的错误：指定的网址被称为 “HREF”，而不是 “URL” 的属性。 – Sam

你试过了吗？var urlOfMyPage = document.url;' – Vikram

使用此：

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

HREF而不是URL。

来源

2014-03-12 21:08:55 adearriba

要获得的iframe

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

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

来源

2014-03-12 21:16:12 JohanVdR

的src得到 “myLink的” 元素的attributs：

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

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

....

来源

2014-03-12 21:23:45 doydoy44

首先，你需要正确地调试。 Alert（）应该总能正常工作，不管你有没有url，所以使用chrome，试试你的代码，然后右键 - >检查元素 - > Console，看看是否有任何错误信息？你也可以设置断点来跟踪你的代码，希望这有助于！

来源

2014-03-12 21:28:08

谢谢你的回答。它帮助我弄清楚为什么警报不会弹出。 – user1700512

的方式，我会做到这一点：

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

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 
}

来源

2014-03-12 21:28:56 Sam

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

回答

相关问题