0

我有以下内联 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 立方体图像并将 a<pre id="constructor">的内容更改为适当构造函数的超链接。（这显然是一个教程页面）。

这在 Chrome 中运行良好，但在其他浏览器中，我得到一个新页面或整个页面的内容更改为：

Mesh mesh = new Mesh.Cube();

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

4

3 回答 3

1

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

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

你可能想这样尝试：

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

但老实说，我只会创建一个辅助函数并直接调用它，如下所示：

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

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

于 2011-01-16T22:11:26.990 回答
1

尝试这个：

<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();
}
于 2011-01-16T22:12:40.140 回答
0

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

的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

于 2011-01-16T22:33:26.030 回答