Javascript内联显示跨浏览器的差异？

Question

我有以下内联 Javascript 代码：

<a href="javascript:{ document['example'].src = 'cube.png'; document.getElementById('constructor').innerHTML = 'Mesh mesh = new Mesh.Cube();'; }">Cube</a>

对于您可怜的疲惫的程序员眼睛，这里是扩展版本：

document['example'].src = 'cube.png';
document.getElementById('constructor').innerHTML = 'Mesh mesh = new Mesh.Cube();';

此代码充当超链接，将 example 图像更改为 3D 立方体的图像并更改

 的内容到适当的构造函数。 （这显然是一个教程页面）。

这在 Chrome 中工作得很好，但在其他浏览器中，我要么得到一个新页面，要么整个页面的内容更改为：

Mesh mesh = new Mesh.Cube();

代码有什么问题？令我困惑的是，它在浏览器中有效，而在另一个浏览器中无效。就好像脚本找不到“构造函数”元素并建议将整个页面作为后备。我远不是 Javascript 专家，所以这只是一个疯狂的猜测。

Answer 1

好吧，我必须说我从未在锚链接中看到过这种符号，我的意思是使用小括号在其中放入一些代码。

我在 Chrome 中尝试过，它确实有效，但在 FireFox 中无效。

不过，您可能想这样尝试：

href="javascript:(function(){ document['example'].src = 'cube.png'; document.getElementById('constructor').innerHTML = 'Mesh mesh = new Mesh.Cube();'; })()"

但说实话，我只是创建一个辅助函数并直接调用它，例如：

href="javascript:myFunction('Cube')"

或者类似的东西（更好的是动态地将事件侦听器附加到锚链接）

Answer 2

试试这个：

<a href="#" onclick="foo(); return false;">Cube</a>

---

在你的 JavaScript 代码中：

function foo () {
    document['example'].src = 'cube.png';
    document.getElementById('constructor').innerHTML = 'Mesh mesh = new Mesh.Cube();
}

Answer 3

我只会回答“代码有什么问题？”

href 的行为与任何 onXXX 事件不同（因此是 javascript: 协议）。它尝试加载新文档并在其中放入一些内容。最糟糕的是，它捕获了所有输出。因此，为了使其按原样工作，您需要捕获所有语句值作为赋值：

var x = document['example'].src = 'cube.png';
var y = document.getElementById('constructor').innerHTML = 'Mesh mesh = new Mesh.Cube();';

当然，所有这些都在 javascript:{...} 中。

这里还有一些很好的评论和解释： http://www.west-wind.com /weblog/posts/9899.aspx