Home>Article>Web Front-end> Practical summary sharing of html iframe use
As mentioned above, iframe can do many things.
For example:
a>Achieve cross-domain through iframe;
b>Use iframe to solve the problem that select cannot be blocked under IE6
c>Use iframe to solve the problem of Ajax forward and backward
d> Asynchronous uploading via iframe. (The form component in Easyui uses iframe. When implementing form submission, you can submit the upload domain)
The following will discuss some issues one by one.
The iframe element creates an inline frame (ie, inline frame) that contains another document.
In HTML 4.1 Strict DTD and XHTML 1.0 Strict DTD, the iframe element is not supported.
Tip: You can place the required text between d5ba1642137c3f32f4f4493ae923989c and 065276f04003e4622c4fe6b64f465b88 to deal with browsers that cannot understand iframes.
注：测试环境IE：8.0，FF：23.0.1 a>隐藏iframe表框 i>标签中设置：frameborder="0", ii>DOM操作： b>动态创建iframe c>获取iframe i>var obj = document.getElementById("iframeID"); 获取iframe对象，可直接操作iframe标签属性,如只想改变iframe的 src 或者 border ，scrolling 等attributes ii>var dom = frames["iframeName"]; 获取iframe的DOM对象，此对象可用来操作对象，比如想操作iframe页面中的元素。 d>获取iframe中的window对象 function getIframeWindow(obj) { //IE || w3c return obj.contentWindow || obj.contentDocument.parentWindow; //parentWindow 是 parent window object } document.getElementById取到的iframe是不能直接操作里面的document的，只能这样取： IE:frames[id].document或obj.contentWindow.document; FF:dom.contentDocument或obj.contentDocument;不绑定任何事件. e>获取iframe页面高度 function getIframeHeight(obj){ var idoc = getIframeWindow(obj).document; if(idoc.body){ return Math.max(idoc.body.scrollHeight,idoc.body.offsetHeight); }else if(idoc.documentElement){ return Math.max(idoc.documentElement.scrollHeight,idoc.documentElement.offsetHeight); } } f>父子页面互访 i>子访问父： parent.html: 等到的信息：
son.html: ii>父访问子： parent.html: 等到的信息：
son.html: Hello world!!!
实际使用iframe中，会遇到iframe高度的问题，由于被嵌套的页面长度不固定而显示出来的滚动条，不仅影响美观，还会对用户操作带来不便 a>同域下的高度自适应 parent.html: 另：document.documentElement与document.body相关说明(W3C DOM2.0规范) document.doucmentElement: documentElement of type Element, readonly,This is a convenience attribute that allows direct access to the child node that is the root element of the document. For HTML documents, this is the element with the tagName "HTML". document.body: document.body is the element that contains the content for the document. In documents with contents, returns the element, and in frameset documents, this returns the outermost
in ie6/ When iframe was introduced in 7/8, its background was white by default. Even if style="background-color:transparent;" was set, it was invalid.
But other browsers (firefox, chrome, opera, ie9) are normal. It appears that to resolve this compatibility issue, an attribute must be used.
Let’s take a look at the phenomenon:
index.html:
The result is as shown below: (The scroll bar in FF is because the scroll bar is set in index.html)
Solution:
Set attributes for iframe: allowTransparency="true" //Set to true to allow transparency
Note: This attribute can be used when iframe does not set this attribute iframe solves the problem of blocking select
a>首先来看看window.frameElement这个属性。 返回嵌入当前window对象的元素(比如 son.html:(注意frameElement用在son.html中，如果用在parent.html中,则返回null)Hello world!!!
备注：虽然该属性名为frameElement,但该属性也会返回其他类型比如
c>定义函数： i>判断父页面中是否含有iframe function hasIframe(){ return document.getElementsByTagName("iframe").length > 0; } ii>判断某个页面是否在iframe标签中 function innerIframe(){ var iframe = window.frameElement; if(iframe){ return typeof iframe !== "undefined"; } }
Differences between HTML 4.01 and HTML 5 In HTML 5, only the src attribute is supported
0a3df55da6942e1fb145c3f08912e1cb065276f04003e4622c4fe6b64f465b88
Global attributes in HTML5:
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 = $("").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 is undefined under chrome?
Problem description:
When I rewrote my calendar component today, due to the use of iframe custom attributes to pass values,
will The value of the parent page is written on the iframe custom attribute, and then used in the iframe page to obtain it using window.frameElement.getAttribute().
The strange thing is that the calendar control code written before has always been written like this, and no errors have occurred, but Today, the window.frameElement in Chrome turned out to be undefined.
There was no problem in Firefox or even IE6. Later, Baidu had no answer, and Google also had no answer.
Solution:
Finally, based on past experience, I thought it might be a problem with local debugging permissions, so I opened apache and used the domain name to access it. Sure enough, it worked, haha!
The above is the detailed content of Practical summary sharing of html iframe use. For more information, please follow other related articles on the PHP Chinese website!