jquery ändert Frame

Mit der Entwicklung der Front-End-Entwicklung ist jQuery für die Mehrheit der Front-End-Entwickler zu einer unverzichtbaren Technologie geworden. Unter anderem wird die Technologie zum Ändern des Frames durch jQuery immer häufiger eingesetzt. In diesem Artikel wird erläutert, wie Sie mit jQuery den Frame ändern.

1. Was ist Frame?

In der Webentwicklung bezieht sich Frame auf den Frame, der auch als Form bezeichnet wird. Dabei handelt es sich um eine HTML-Technologie, die eine Seite in mehrere Ansichten aufteilt, sodass Entwickler mehrere unabhängige HTML-Dokumente gleichzeitig auf derselben Seite anzeigen können. Frames können in zwei Typen unterteilt werden: der eine ist ein horizontaler Frameset und der andere ist ein vertikaler Frameset. Wie in der Abbildung unten gezeigt:

2. Wie jQuery den Rahmen ändert

Es gibt zwei Möglichkeiten, den Rahmen zu ändern über jQuery:

1. Betreiben Sie den untergeordneten Frame über das JS der übergeordneten Seite

Rufen Sie das Objekt des untergeordneten Frames über JS auf der übergeordneten Seite ab und verwenden Sie dann das ID oder Name des zu bedienenden untergeordneten Frames, um den gesamten Inhalt des Subframes zu ändern. Unter diesen ist die Methode zum Erhalten von Unterrahmen wie folgt:

var frameObj = $(frames["frameName"]);

Unter ihnen ist Frames ein globales Objekt, das die Sammlung aller Frames im Dokument enthält. Sie können die erforderlichen Informationen erhalten, indem Sie die hinzufügen Name oder ID des Frames in eckigen Klammern.

Verwenden Sie dann das FrameObj-Objekt, um den Inhalt des Frames zu bedienen. Der folgende Beispielcode:

var frameObj = $(frames["frameName"]);
// 更改frame的src为http://www.example.com
frameObj.attr("src", "http://www.example.com");
// 获取frame的内容
console.log(frameObj.contents().find('.className').html());

2. Betreiben Sie die übergeordnete Seite über den JS des untergeordneten Frames.

Verwenden Sie JS im untergeordneten Frame, um das Objekt der übergeordneten Seite abzurufen. und verwenden Sie dann die ID der übergeordneten Seite oder den Namen für den Betrieb. Unter diesen ist die Methode zum Abrufen der übergeordneten Seite wie folgt:

var parentObj = $(window.parent.document);

Unter diesen wird das Objekt des übergeordneten Fensters über window.parent abgerufen, und dann wird das Dokumentobjekt des Fensters über abgerufen dokumentieren.

Verwenden Sie dann das parentObj-Objekt, um den Inhalt der übergeordneten Seite zu bedienen. Der folgende Beispielcode:

var parentObj = $(window.parent.document);
// 更改父页面的title
parentObj.find('title').html('新的标题');
// 获取父页面的内容
console.log(parentObj.find('.className').html());

3. Verwendungsszenarien von jQuery beim Ändern des Frames

1. Wenn die Seite mehrere Frames enthält, ändern Sie den Inhalt im Frame dynamisch um nahtlos zu erreichen Der Effekt der Aktualisierung der aktualisierten Seite.
2. Die übergeordnete Seite steuert den Inhalt der untergeordneten Seite durch Interaktion mit dem untergeordneten Frame, z. B. durch Ändern der Farbe, Größe usw. eines Elements auf der untergeordneten Seite in der übergeordneten Seite.
3. Die untergeordnete Seite sendet das Formular oder erhält die Daten der übergeordneten Seite durch Interaktion mit der übergeordneten Seite, wodurch die Datenübertragung und -freigabe realisiert wird.

4. Zu beachtende Dinge

1. Aufgrund domänenübergreifender Anforderungen können Frames standardmäßig nicht aufeinander zugreifen und geändert werden. Eine domänenübergreifende Kommunikation kann jedoch erreicht werden, indem das Sandbox-Attribut des Frames und das Allow-Same-Origin-Attribut der übergeordneten Seite festgelegt werden.
2. Frames müssen denselben Domänennamen, dieselbe Portnummer und dasselbe Protokoll verwenden, um auf einander zuzugreifen und diese zu ändern.
3. Um auf den Frame in jQuery zuzugreifen, müssen Sie zunächst warten, bis das DOM geladen ist, und es in window.onload verwenden.

5. Zusammenfassung

In diesem Artikel wird beschrieben, wie Sie den Frame über jQuery ändern, und seine Szenarien und Vorsichtsmaßnahmen werden detailliert beschrieben. Ein gründliches Verständnis dieses Wissens ermöglicht es uns, die Frontend-Entwicklung besser durchzuführen und mehr Funktionen zu implementieren.

Das obige ist der detaillierte Inhalt vonjquery ändert Frame. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!