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キューブの画像に変更し、<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

「コードの何が問題なの？」と答えるだけです。

hrefonXXXイベントとは動作が異なります（したがって、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 に答える