最近、私は毎日論文提案に取り組んでいます。自分のスキルを発揮して、再び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 は MySQL8.0.22 (推奨コレクション) をインストールします1. MyS...
Docker は過去 2 年間で非常に人気が高まっています。開発者はすべてのアプリケーションとソフト...
<br />これまで、Web ページのプリンタ対応バージョンを作成するには、印刷したとき...
エフェクト表示: 環境準備コントローラーノード: 6GB 4時間60GB/30GB/30GB計算ノー...
1. まずMySQLとEclipseの環境を準備します。環境がセットアップされたら、Eclipseの...
目次序文グローバルパラメータの永続性最後に要約する参考資料:序文2018 年に MySQL 8.0....
必要Windows システムでも Linux システムでも、さまざまな理由でパスワードを忘れてしまう...
MySQL 8.0 サービスを開始できません最近、 cmdで MySQL サービスを起動するときに遭...
MySQL データベースに保存されるデータが徐々に増加すると、元のストレージ領域がいっぱいになり、M...
目次序文以前のバージョンイテレータパターンイテレータファクトリ関数イテレータプロトコル最後に序文多く...
より使いやすい Web アプリケーションを設計するための 10 のヒントをご紹介します。ヒント1: ...
目次序文1. 理由: 2. 解決策のアイデア: 1. ローカル保存方法: 2. 実装手順: 3. 最...
テーブル パーティショニングは、データベース パーティショニングとは異なります。では、テーブル パー...
目次元の配列を変更しない方法1. 連結文法:パラメータ:戻り値: 2. 参加する文法:パラメータ:戻...
次の図に示すように: Centos 7.0以上であれば問題ありません。現在のシステム カーネル バー...