iframe ページで js 関数を呼び出すには js を使用します

最近、私は毎日論文提案に取り組んでいます。自分のスキルを発揮して、再びWebをデザインしたくてうずうずしていました。突然、問題に遭遇しました。以前は、WEBページをデザインするときは常にIEで実行していました。Chromeはおろか、Firefoxも考慮しませんでした。しかし、今は違います。少なくとも、Firefoxと互換性のないWEBページは非常に醜く、偽物だと思います。そのため、この概念を持って以来、ページをデザインするときに互換性に注意を払うようになりました。今回、互換性の問題に遭遇しました。htmlにはフローティングフレーム<iframe>があり、ページ内にページを埋め込むことができます。下の図に示すように、フレームページを作成するのに非常に適しています。

HTML ページは 2 つの部分に分かれており、左側はナビゲーションバー、右側は表示されるコンテンツです。コードは次のとおりです。
左の列のコードは次のとおりです。
<IFRAME frameBorder=0 id=frmTitleLeft name=framLeft src="left.html" style="HEIGHT: 100%; width:180px;">
left.htmlに接続
右の列も同様です。私が作成したページの場合、プレビュー効果は次のようになります。

では、より実用的な効果を得るために、どのような効果を達成できるでしょうか。任意のリンクをクリックすると、右側の列に表示されます。明らかに、js を介して実装する必要があります。元の互換性のない方法についてはあまり説明しません。次の実装手順を覚えておいてください。
1. まず、右列のiframeオブジェクトを取得します
var frames=document.getElementById("frameid"); //frameid は右列の iframe の ID 名です
2. src値をリセットする
frames.src=pageurl; //pageurlは表示されるページなので、ページジャンプが実現されます

しかし、もう 1 つあります。その中で関数を呼び出したい場合、それはそれほど簡単ではありません。たとえば、右の列に関数 right() があります。左の列のリンクで right() 関数を呼び出したいのですが、どうすれば実現できるでしょうか。

1. まず、leftframeはコンテナページindex.htmlに埋め込まれているので、インデックスレベルに戻ってrightframeオブジェクトを取得する必要があります。
var frames=window.parent.window.document.getElementById("frameid");

2. ページ内の関数を実行するには、ウィンドウオブジェクトを取得する必要があります。ここには重要なオブジェクトcontentWindowがあります。このオブジェクトを取得したら、その中の関数を実行できます。
フレームのコンテンツウィンドウを右にドラッグします。

上記コードはIE6、Firefox3、Chrome2.0に対応しており、テストも無事に通過しました。IE7は試していませんが、問題ないはずです。

<<: jQuery キャンバスは QR コード付きのポスターを生成します

>>: スマートCSSを使用して、ユーザーのスクロール位置に基づいてスタイルを適用します。