Praktische Zusammenfassung der Verwendung von HTML-Iframes

Wie oben erwähnt, kann iframe viele Dinge tun.
Zum Beispiel:
a> Erreichen Sie domänenübergreifend durch iframe; verwenden Sie iframe, um das Problem zu lösen, dass die Auswahl unter IE6 nicht blockiert werden kann.
c> über iframe
d> Asynchrones Hochladen über iframe. (Die Formularkomponente in Easyui verwendet iframe. Bei der Implementierung der Formularübermittlung können Sie die Upload-Domain übermitteln.)
Einige Probleme werden im Folgenden einzeln besprochen.

1. Grundkenntnisse von iframe:

Das iframe-Element erstellt einen Inline-Frame (d. h. Inline-Frame), der ein anderes Dokument enthält.

In HTML 4.1 Strict DTD und XHTML 1.0 Strict DTD werden Iframe-Elemente nicht unterstützt.
Tipp: Sie können den erforderlichen Text zwischen Globale Attribute in HTML5:

7. Formularkomponentenübermittlung in easyui (einschließlich Upload-Domain):

8. Online-Problemsammlung:

	function submitForm(target, options) {
		options = options || {};
		if (options.onSubmit) {
			if (options.onSubmit.call(target) == false) {
				return;
			}
		}
		var form = $(target);
		if (options.url) {
			form.attr("action", options.url);
		}
		var frameId = "easyui_frame_" + (new Date().getTime());
		var frame = $("<iframe id=" + frameId + " name=" + frameId + "></iframe>").attr(
				"src",
				window.ActiveXObject ? "javascript:false" : "about:blank").css(
				{
					position : "absolute",
					top : -1000,
					left : -1000
				});
		var t = form.attr("target"), a = form.attr("action");
		form.attr("target", frameId);//在iframe中提交表单
		try {
			frame.appendTo("body");
			frame.bind("load", cb);
			form[0].submit();
		} finally {
			form.attr("action", a);
			t ? form.attr("target", t) : form.removeAttr("target");
		}
		var checkCount = 10;
		function cb() {
			frame.unbind();
			var body = $("#" + frameId).contents().find("body");
			//contents()查找匹配元素内部所有的子节点（包括文本节点）。如果元素是一个iframe，则查找文档内容
			var data = body.html();
			if (data == "") {
				if (--checkCount) {
					setTimeout(cb, 100);
					return;
				}
				return;
			}
			var ta = body.find(">textarea");
			if (ta.length) {
				data = ta.val();
			} else {
				var pre = body.find(">pre");
				if (pre.length) {
					data = pre.html();
				}
			}
			if (options.success) {
				options.success(data);
			}
			setTimeout(function() {
				frame.unbind();
				frame.remove();
			}, 100);
		};
	};
	另：form 的target属性：
	a>HTML4中：
	定义和用法：target 属性规定在何处打开 action URL。
	兼容性：在 HTML 4.01 中，不赞成使用 form 元素的 target 属性；在 XHTML 1.0 Strict DTD 中，不支持该属性。
	属性值：
	_blank 新窗口中打开
	_self  默认，在相同的框架中打开
	_parent 父框架中打开
	_top    整个窗口中打开
	framename  指定的frame name属性值的框架中打开

	b>HTML5中：
	HTML 4.01 与 HTML 5 之间的差异
	在 HTML5 中 target 属性不再是被废弃的属性。不再支持 frame 和 frameset。
	现在，parent, top 和 framename 值大多用于 iframe。

a>window.frameElement ist in Chrome undefiniert?

Problembeschreibung:

Als ich heute meine Kalenderkomponente neu schrieb, übergab ich aufgrund der Verwendung von iframe den Wert des benutzerdefinierten Attributs

Schreiben Sie den Wert der übergeordneten Seite in das benutzerdefinierte Iframe-Attribut und verwenden Sie dann window.frameElement.getAttribute(). um es auf der iframe-Seite zu erhalten.

Das Seltsame ist, dass der zuvor geschriebene Kalendersteuercode immer so war und keine Fehler aufgetreten sind, aber heute stellte sich heraus, dass window.frameElement in Chrome undefiniert war.
Es gab kein Problem in Firefox oder sogar IE6. Später hatte Baidu keine Antwort und auch Google hatte keine Antwort.
Lösung:
Schließlich dachte ich aufgrund früherer Erfahrungen, dass es ein Problem mit den lokalen Debugging-Berechtigungen sein könnte, also habe ich Apache geöffnet und den Domänennamen verwendet, um darauf zuzugreifen, und tatsächlich hat es funktioniert, haha!

Das obige ist der detaillierte Inhalt vonPraktische Zusammenfassung der Verwendung von HTML-Iframes. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!