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立方体的图像，并将<pre id="constructor">的内容更改为相应的构造函数。（这显然是一个教程页面。）

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

Mesh mesh = new Mesh.Cube();

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

Answer 1

嗯，我必须说我从来没有在锚链中看过这种符号，用braket将一些代码放入其中我的意思。

我在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：protocol）不同。它试图加载新文档并将内容放入其中。最糟糕的是，它捕获了所有输出。因此，为了使其按原样工作，您需要将所有语句值捕获为赋值：


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

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

3 个答案: