Iframe element usage Summary

Document directory

• All the attributes of Firefox iframe:
• All iframe attributes of IE6
• All iframe attributes of IE8
• Highly adaptive problems
• Access the home page through iframe

Iframe is a very useful tag. If you do not use it to model Ajax effects in the early days, the rich editor is definitely the main character. However, iframe is a special element, which was first introduced in IE4.0 and subsequently absorbed by other browsers. Since IE is not open-source, iframe is quite different in various browsers. First, let's see what attributes it has in various browsers --

All the attributes of Firefox iframe:

ScrollWidth, clientLeft, clientHeight, clientWidth, clientTop, upper, lower, lower, baseURI, textContent, compareDocumentPosition, getUserData, isSameNode, lower, setUserData, lower, is%node, dispatchEvent, lower, style, orientation, offsetParent, innerHTML, offsetLeft, offsetTop, offsetHeight, offsetWidth, contentWindow, src, contentDocument, className, id, title, tagName, removeAttributeNS, removeAttribute, getAttribute, attributes, setAttribute, attributes, hasAttributeNS, setAttributeNS, hasAttribute, getAttributeNS, attributes, firstChild, prefix, nodeValue, delimiter, nodeName, delimiter, delimiter, nodeType, localName, lastChild, ownerDocument, parentNode, attributes, appendChild, cloneNode, normalize, primary, primary, replaceChild, removeChild, hasAttributes, isSupported, getAttributeNode, primary, ELEMENT_NODE, primary, TEXT_NODE, primary, primary, ENTITY_NODE, primary, COMMENT_NODE, DOCUMENT_NODE, struct, struct, NOTATION_NODE, lang, dir, align, frameBorder, height, longDesc, marginHeight, marginWidth, name, scrolling, width, getSVGDocument, tabIndex, draggable, blur, focus, feature, spellcheck, addEventListener, getFeature, feature, metrics, scrollTop, scrollLeft, scrollHeight, firstElementChild, lastElementChild, metrics, childElementCount, children, querySelector, querySelectorAll

All iframe attributes of IE6

Language, scrollHeight, distance, currentStyle, document, onmouseup, oncontextmenu, isMultiLine, clientHeight, values, onactivate, scrollLeft, lang, onmousemove, onmove, onselectstart, begin, oncontrolselect, canHaveHTML, onkeypress, oncut, onrowenter, onmousedown, onpaste, className, id, region, region, hideFocus, dir, delimiter, onkeydown, clientWidth, distance, parentElement, ondrag, ondragstart, oncellchange, recordNumber, onfilterchange, identifier, identifier, onmousewheel, ondragenter, onblur, onresizeend, onerrorupdate, identifier, ondblclick, scopeName, onkeyup, identifier, onmouseover, identifier, outerText, innerText, identifier, tagName, title, offsetWidth, onresize, resize, runtimeStyle, filters, ondrop, onpage, tags, tagUrn, offsetLeft, clientTop, style, upper, clientLeft, ondatasetchanged, canHaveChildren, upper, isDisabled, onpropertychange, ondragover, onhelp, ondragend, disabled, disabled, onfocus, primary, accessKey, onscroll, rollback, primary, readyState, all, sourceIndex, onclick, scrollTop, oncopy, onfocusin, tabIndex, onbeforeupdate, outerHTML, innerHTML, rule, offsetHeight, onmovestart, onmouseout, scrollWidth, offsetTop, onmouseenter, rule, offsetParent, onafterupdate, rule, children, parentNode, border, nodeValue, firstChild, name, align, marginWidth, contentWindow, hspace, frameSpacing, dataFormatAs, lastChild, ownerDocument, vspace, marginHeight, data1_, attributes, dataSrc, src, frameBorder, nodeType, noResize, width, distance, scrolling, nodeName, role, longDesc, onload, nextSibling, height, allowTransparency

All iframe attributes of IE8

Region, onresizeend, onrowenter, aria-haspopup, childNodes, ondragleave, canHaveHTML, region, ondragover, region, aria-disabled, onpage, recordNumber, region, nodeName, region, accessKey, currentStyle, scrollLeft, primary, oncontrolselect, aria-hidden, onblur, hideFocus, clientHeight, style, primary, dir, aria-expanded, onkeydown, nodeType, ondragstart, onscroll, onpropertychange, ondragenter, id, aria-level, bytes, scopeName, lang, onmouseup, aria-busy, oncontextmenu, language, scrollTop, offsetWidth, onbeforeupdate, onreadystatechange, onmouseenter, filters, onresize, cursor, aria-checked, aria-readonly, oncopy, onselectstart, scrollHeight, onmove, ondragend, begin, lastChild, aria-secret, onactivate, canHaveChildren, onfocus, region, isMultiLine, onmouseover, offsetTop, oncut, parentNode, tagName, className, onmousemove, title, role, role, onfocusout, onfilterchange, disabled, parentTextEdit, ownerDocument, offsetParent, aria-posinset, ondrop, ondblclick, comment, tabIndex, onkeypress, aria-relevant, onlosecapture, innerText, aria-live, parentElement, ondeactivate, aria-plain, aria-pressed, children, ondatasetchanged, ondataavailable, aria-invalid, onafterupdate, nodeValue, onmousewheel, onkeyup, readyState, onmovestart, aria-valuenow, aria-selected, onmouseout, aria-owns, aria-valuemax, onmoveend, begin, document, firstChild, sourceIndex, outerText, isTextEdit, isDisabled, oncellchange, runtimeStyle, scrollWidth, aria-valuemin, metric, onhelp, attributes, offsetHeight, onerrorupdate, onmousedown, clientTop, aria-setsize, clientWidth, onpaste, tagUrn, cursor, onclick, outerHTML, ondrag, aria-controls, onresizestart, aria-flowto, ondatasetcomplete, aria-required, clientLeft, aria-describedby, all, bytes, innerHTML, aria-activedescendant, aria-multiselectable, offsetLeft, frameSpacing, vspace, noResize, onload, height, marginHeight, border, longDesc, src, frameBorder, dataFormatAs, width, dataSrc, allowTransparency, contentDocument, name, contentWindow, marginWidth, dataworkflow, scrolling, align, hspace

The frameborder attribute is usually used to hide the iframe border. For example, you can use Dreamweaver to generate the following code:

1. 2. < IframeFrameborder = 0 src = 'xxxx' width = 'xxx' height = 'xxx'> </ Iframe>

However, if you use DOM to generate an iframeIEBut the border cannot be hidden. For example:

1. 2. VarIframe = document. createElement ('iframe'); 3. iframe. setAttribute ('frameborder', 0); // valid in Firefox and invalid in IE

We need to assign values to its attributes directly:

1. 2. iframe. frameBorder = 0; // both Firefox and IE are valid.

Internet Explorer 5.5 supports transparent content of floating frameworks. To define transparent content for a floating framework, the following conditions must be met:

• The allowTransparency label attribute used with the iframe element must be set to true.
• In the iframe content source document, the bgColor label attribute of the background-color or body element must be set to transparent.

1. Code containing the framework page.

1. 2. < BodyBgColor = "# eeeeee"> < IframeAllowTransparency = "true" src = "transparent.htm"> </ Iframe>

2.transparent.htm Page code.

1. 2. < BodyBgColor = "transparent">

Perform operations on iframe:

1. 2. VarObj = document. getElementById ("iframe"); // get object 3. VarDom = document. all. frames ["iframe"]; // get the DOM

If you only want to change the attributes of iframe, such as src, border, and scrolling (Unlike property, property cannot be written in tags, such as scrollHeight and nnerHTML.), You need to use the first method.

If you want to obtain the iframe page (not the iframe itself ). The second method is required, because it obtains a complete DOM model. For example, if you want to get the content of document. body of iframe, you can only use the second method.

To operate the DOM element in iframe, pay attention to the following two points:

1. You must first obtain the document of the specified iframe
2. For 1, it must be obtained after the page is loaded;

Control the Page Style in Iframe

01. 02. <! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 03. < HtmlXmlns = "http://www.w3.org/1999/xhtml" lang = "zh-CN"> 04. < Head> 05. < MetaHttp-equiv = "Content-Type" content = "text/html; charset = gb2312"/> 06. < Title> </ Title> 07. </ Head> 08. < Body> 09. < IframeId = "FF" src = "B .htm"> </ Iframe> 10. < InputType = "submit" value = "OK" onclick = "OK ()"/> 11. 12. < ScriptLanguage = "JavaScript"> 13. function OK () 14. {15. // operate the CSS16. var iframe = document. getElementById ('ff '); 17. var body = iframe.content+doc ument. body; 18. 19. body. style. marginTop = 50; 20. body. style. padding = 0; 21. body. style. fontSize = 30; 22. body. style. textAlign = 'center'; 23. body. style. backgroundColor = 'red'; 24. body. style. color = 'Blue '; 25 .} 26. </ Script> 27. </ Body> 28. </ Html>

Remove the border of the dynamically created iframe

1. 2. VarIframe = document. createElement ('iframe'); 3. iframe. scrolling = "no"; // the setting of these two attributes is indispensable. 4. iframe. frameborder = "no ";

The window and iframe labels are different. The contentWindow attribute of iframe is the window

You can use getElementById to obtain the iframe tag ie. You can use the id to obtain the window

Highly adaptive problems

ScrollHeight returns a number with no unit

If no DTD Declaration is available in IE, It is parsed by loose. dtd. When the width of the object is set, the unit "px" is automatically added"

Setting the height of iframe to the height of document. body does not necessarily succeed, because the height of document. body may not be as large as the height of the entire file, such as the Layer

The correct syntax is as follows:

1. VarMainFrame = parent.doc ument. getElementById ("main"); 2. mainFrame. style. height = document.doc umentElement. offsetHeight + "px"; // it is best to add a constant, such as 10

Access the home page through iframe

Note: The pseudo Ajax effect is simulated in this way.

01. 02. <script type = "text/javascript"> 03. window. onload = Function() {// This is the homepage code 04. VarFrame = document. getElementById ("frame1"); 05. VarMsg = frame. contentDocument. getElementById ("message"); 06. msg. innerHTML = "Hello World from Frame Page 1"; 07 .}; 08. </script> 09. </pre> 10. <pre class = "brush: javascript; gutter: false; toolbar: false"> 11. // This is the iframe part! 12. <div class = "errordisplay" id = "message"> 13. original14. </div> 15. 16. <script type = "text/javascript"> 17. VarMsg = optional bytes parent.doc ument. getElementById ("message"); 18. msg. innerHTML = "Updated from iFrame"; 19. </script>

Document. getElementById:

• In IE, frames[id).documentor document.getelementbyid(id).content?#doc ument;
• In firefox, frames [name]. contentDocument or document. getElementById (id). contentDocument;

Finally, remember that iframe is not bound to any event in FF!