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

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を使用して、ユーザーのスクロール位置に基づいてスタイルを適用します。

推薦する

CenOS6.7 mysql 8.0.22 のインストールと設定方法のグラフィックチュートリアル

CenOS6.7 は MySQL8.0.22 (推奨コレクション) をインストールします1. MyS...

Docker がデータベースのデプロイに適さない 7 つの理由のまとめ

Docker は過去 2 年間で非常に人気が高まっています。開発者はすべてのアプリケーションとソフト...

XHTML CSS ページをプリンタ ページに変換する

<br />これまで、Web ページのプリンタ対応バージョンを作成するには、印刷したとき...

CentOS ベースの OpenStack 環境の展開に関する詳細なチュートリアル (OpenStack のインストール)

エフェクト表示: 環境準備コントローラーノード: 6GB 4時間60GB/30GB/30GB計算ノー...

JDBC を MySQL 5.7 に接続する方法

1. まずMySQLとEclipseの環境を準備します。環境がセットアップされたら、Eclipseの...

MySQL 8の新機能におけるグローバルパラメータの永続性の詳細な説明

目次序文グローバルパラメータの永続性最後に要約する参考資料:序文2018 年に MySQL 8.0....

CentOS 7 パスワードを忘れた場合の解決プロセス図

必要Windows システムでも Linux システムでも、さまざまな理由でパスワードを忘れてしまう...

MySQL 8.0 が起動できない 3534 の解決策

MySQL 8.0 サービスを開始できません最近、 cmdで MySQL サービスを起動するときに遭...

MySQL 5.7 でデータベースのデータ保存場所を変更する方法

MySQL データベースに保存されるデータが徐々に増加すると、元のストレージ領域がいっぱいになり、M...

ECMAScript のイテレータの詳細な説明

目次序文以前のバージョンイテレータパターンイテレータファクトリ関数イテレータプロトコル最後に序文多く...

便利で使いやすいウェブアプリケーションを設計するための 10 のヒント

より使いやすい Web アプリケーションを設計するための 10 のヒントをご紹介します。ヒント1: ...

Vuexはセッションストレージデータを結合して、ページを更新するときにデータが失われる問題を解決します

目次序文1. 理由: 2. 解決策のアイデア: 1. ローカル保存方法: 2. 実装手順: 3. 最...

MySQL データベース テーブルのパーティション分割に関する考慮事項 [推奨]

テーブル パーティショニングは、データベース パーティショニングとは異なります。では、テーブル パー...

JavaScript配列の一般的なメソッドの詳細な説明

目次元の配列を変更しない方法1. 連結文法:パラメータ:戻り値: 2. 参加する文法:パラメータ:戻...

YUMを使用してdockerをインストールする方法

次の図に示すように: Centos 7.0以上であれば問題ありません。現在のシステム カーネル バー...