Javascript:需要解决方法:Internet Explorer 在更改 href 时更改链接文本

Question

我遇到如下问题:我们在应用程序中使用富文本编辑器(TinyMCE，但我认为这在这里并不重要)。现在，对于 Internet Explorer 8，我们注意到如果您键入看起来像网址的内容:

www.google.com

...IE 通过浏览器的一些 native 功能将其转换为链接。现在如果你真的想把它变成一个链接，选择编辑链接属性，然后设置 href 例如到

www.google.com/analytics

...然后当 javascript 设置 anchor 标记的 href 属性时，链接的文本也会发生变化。期望的结果是:

`<a href="http://www.google.com/analytics">www.google.com</a>`

但实际上是:

`<a href="http://www.google.com/analytics">www.google.com/analytics</a>`

有人知道解决这个问题的方法吗？

更新:此行为仅在 Internet Explorer 8 和 7 中观察到。Firefox、Chrome 和 Safari 不受影响。在TinyMCE网站上也可以观察到该问题http://tinymce.moxiecode.com/examples/full.php ，所以这可能不是 TinyMCE 配置问题。

Answer 1

经过一番研究和调试，我发现问题是由Internet Explorer 的内置行为引起的。它发生在设置链接的 href-属性时，其文本内容显示为 URL(根据 IE)。在这些情况下，IE 将 href 属性的内容复制到链接文本中。

可能有几种解决方法，但我发现至少这个逻辑有效:

1. 将 innerHTML 存储到一个临时变量中，
2. 照常设置 href 属性
3. 如果 innerHTML 已更改，则从临时变量中复制回原始 innerHTML。

这似乎可行，因为更改链接的 innerHTML 不会导致更改 href 属性。

在tinyMCE中，在advlink插件的functions.js的setAllAttribs()中找到如下一行:

setAttrib(elm, 'href', href);

...并用这个怪物代替它:

if(tinyMCE.isMSIE) {
    var tmp = elm.innerHTML;
    setAttrib(elm, 'href', href);
    if(elm.innerHTML != tmp) // optional, but keeps unnecessary innerHTML set:s away
        elm.innerHTML = tmp;
}
else {
    setAttrib(elm, 'href', href);
}

...您的链接将显示为原封不动。我也是started a thread on the tinyMCE forums对这个。如果他们发布了对我的解决方案的一些改进或认为这是无稽之谈，我也会更新这个问题。