jQueryでフレームが変更される

フロントエンド開発では、iframe は 1 つのページに他のページを埋め込むことができる非常に一般的なタグです。ただし、場合によっては、iframe に別のコンテンツをロードしたり、特定のアクションを実行したりする必要があります。このような場合、jQuery を使用して iframe 内のコンテンツを変更および操作できます。

1. iframe オブジェクトの取得

iframe 内のコンテンツを変更または操作するには、まず iframe オブジェクトを取得する必要があります。 jQuery のセレクターを使用して iframe オブジェクトを取得できます。たとえば、次の iframe があるとします。

us そのオブジェクトは次のコードを通じて取得できます:

var myFrame = $('#myFrame')[0].contentWindow;

ここで、myFrame は iframe オブジェクトです。

2. iframe の要素を取得する

iframe オブジェクトを取得した後、変更または操作する必要がある要素を見つけて取得できます。この機能を実現するには 2 つの方法があります。

最初の方法は、contentDocument 属性を通じて iframe 内のドキュメント オブジェクトを取得し、その中の要素を見つけることができます。例:

var myFrame = $('#myFrame')[0].contentWindow;
var content = myFrame.contentDocument;
var element = $(content).find('# myElement ');

このうち、myElementは操作が必要な要素のIDです。

もう 1 つの方法は、iframe のオブジェクト内で要素を直接検索することです。例:

var myFrame = $('#myFrame')[0].contentWindow;
var element = $(myFrame.document).find('#myElement');

両方のメソッドを使用して iframe 内の要素を取得できますが、どちらを使用するかは特定のニーズによって異なります。

3. iframe 内のコンテンツを変更する

iframe 内の要素を取得した後、jQuery の関連メソッドを使用してそのコンテンツを変更できます。

たとえば、iframe のタイトルを変更したい場合は、次のようにすることができます:

var myFrame = $('#myFrame')[0].contentWindow;
var content = myFrame .contentDocument;
$(content).find('title').text('New Title');

このうち、titleは変更が必要な要素です。 $().text() メソッドは、要素内のテキストの内容を変更できます。

同様に、iframe 内の画像を変更したい場合は、次のようにすることができます:

var myFrame = $('#myFrame')[0].contentWindow;
var content = myFrame .contentDocument;
$(content).find('#myImage').attr('src', 'newimage.jpg');

このうち、myImage は、変えなければいけないイメージ。 $().attr() メソッドは要素の属性値を変更できます。

4. iframe で操作を実行する

iframe でコンテンツを変更することに加えて、iframe でいくつかの特別な操作を実行することもできます。たとえば、iframe 内のコンテンツを出力したい場合は、次のようにすることができます:

var myFrame = $('#myFrame')[0].contentWindow;
var content = myFrame.contentDocument ;
$(content).find('body').append('

Some text

');

このうち、body はコンテンツを追加する必要がある要素です。追加される。 $().append() メソッドは、要素の末尾に新しいコンテンツを追加します。

さらに、iframe で JavaScript を使用して一部の操作を実行することもできます。たとえば、iframe 内にダイアログ ボックスをポップアップ表示したい場合は、次のように実行できます:

var myFrame = $('#myFrame')[0].contentWindow;
myFrame.alert( 'Hello, world !');

このうち、alert() は JavaScript の組み込み関数で、ダイアログ ボックスをポップアップするために使用されます。ここでは、iframe のオブジェクト内で直接呼び出します。

概要

上記の方法により、iframe 内のコンテンツを簡単に操作および変更できます。 jQuery を使用して iframe を操作する場合は、クロスドメインの問題に注意する必要があります。そうしないと、CORS (Cross-Origin Resource Sharing) の制限が発生する可能性があります。ドメイン間で iframe を操作する必要がある場合は、postMessage メソッドを使用してこれを実現できます。

以上がjQueryでフレームが変更されるの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。