主页 > 网站建设 >

IE6/7下a.getAttribute(href,2)的问题分析及解决

网站建设 2023-01-28 20:48www.1681989.com免费网站

简述
在IE6、7下，一般的a标签（写好在HTML中的，通过dom操作插入到页面中的a标签）中，假如href的值是一个相对路径时，直接通过a.getAttribute("href")，获取到的不是href的原始值，但可以通过a.getAttribute("href",2)获取到原始值；但如果这种a标签是通过nerHTML插入的话，即使通过a.getAttribute("href",2)也无法获取原始的href值。估计在nerHTML='<a href="/haha">test</a>'的时候，IE6、7会对其做兼容处理，加入一些东西，这个时候通过outerHTML查看，a的href已经是完整地址-_-! 据说img的src也会出现类似情况。
匆匆路过的……看完上面即可……狼蚁网站SEO优化开始瞎扯
---------------------------------------------------------------------------------------------------------------------------------
原始目标一个单页应用，想根据a的href属性的值，是否http://开头。如果是，则继续跳转；如果不是，则通过兼容的pushState修改url地址，触发route。
问题测试IE6、7时，发现a未能正确拦截……
解决办法问谷姐……得知IE6、7的getAttribute有第二个参数，设为2即可取回原来的属性值。介绍链接如下
http://msdn.microsoft./en-us/library/ie/ms536429%28v=vs.85%29.aspx
看到这里，心里暗爽，马上补一句代码……在按下Ctrl+F5测试后…马上歇菜……为啥不行呢？！百思不得其解……
这时候跟一位朋友瞎扯……不知道扯哪去了……在问Frank的过程中，我排除了代码中其他干扰，用以下代码测试

复制代码
代码如下:

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
</head>
<body>
<a id="a" href="" onclick=".getAttribute(\"href\",2)">test</a>
</body>
</html>

　在IE6、7下点击，都弹出大大的“/haha”！！！我就开始怀疑是其他东西在搞鬼了。这时候，想到我的a标签是怎么来的（基于字符串的js模板，nerHTML）……于是，再通过以下代码模拟

复制代码
代码如下:

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
</head>
<body>
<div id="test"></div>
<script>
document.getElementById("test").nerHTML = '<a id="a" href="/haha" onclick="alert(this.getAttribute(\'href\',2));return false;">test</a>';
</script>
</body>
</html>

测试……sister's……重现问题了！实测，在生成a之后，对asetAttribute("href","/haha",2)，再getAttribute("href",2)可以拿回“/haha”。但如果要在模板中做这种事情，似乎太恶心了，果断放弃！还是听Frank的话……简简单单加个属性标识两种链接元素，别钻牛角尖。
再钻一钻-_-!

复制代码
代码如下:

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
</head>
<body>
<div id="test"></div>
<script>
var test = document.getElementById("test");
var a = document.createElement("a");
var txt = document.createTextNode("test");
a.href="/haha";
a.onclick=function() {
alert(this.getAttribute('href',2));//"/haha"
return false;
};
a.appendChild(txt);
test.appendChild(a);
</script>
</body>
</html>

，怀疑通过nerHTML插入节点时，ie6、7会做一些它认为正确的“容错”处理……容着容着，就让我错了……

上一篇：使用谷歌网页字体无限制的添加字体到您的网站 下一篇：从image/x-png谈ContentType(s)

网站设计

Copyright © 2016-2025 www.1681989.com 推火网 版权所有 Power by