How to use HTML
HTML
An inline frame is used to embed another document within the current HTML document.
How to use the HTML
Mark an inline frame:
<iframe src="//www.w3cschool.cn"></iframe>
HTML
Basic usage of HTML
Usage scenarios: Most of the pages are the same, but a few are different. For example, in the system, the left_nav and top content of each page are consistent, but the content on the lower right is changing.
Advantages: Improve the reuse rate of page code and let us be lazy.
Disadvantages: The page URL address has not changed.
3 methods for iframe height adaptation:
iframe content is unknown and highly predictable
At this time, we can add a default to it The CSS min-height value, and then simultaneously use JavaScript to change the height. Commonly used compatibility codes are:
1. (If information is exchanged between different subdomains under the same top-level domain name, set document.domain="caibaojian.com")
// document.domain = "caibaojian.com"; function setIframeHeight(iframe) { if (iframe) { var iframeWin = iframe.contentWindow || iframe.contentDocument.parentWindow; if (iframeWin.document.body) { iframe.height = iframeWin.document.documentElement.scrollHeight || iframeWin.document.body.scrollHeight; }} }; window.onload = function () { setIframeHeight(document.getElementById('external-frame')); };
2 .Call for the known iframe ID:
Just modify the above iframe ID. Or you can write the code directly in the iframe. In order not to pollute the HTML code, we generally recommend using the above code.
<iframe src="backtop.html" frameborder="0" scrolling="no" id="external-frame" onload="setIframeHeight(this)"></iframe>
3. The iframe height adapts when the content width changes:
function iframeAutoFit(iframeObj){ setTimeout(function(){if(!iframeObj) return;iframeObj.height=(iframeObj.Document?iframeObj.Document.body.scrollHeight:iframeObj.contentDocument.body.offsetHeight);},200) }
4. Open the debugging run window and you can see the running:
<iframe src="backtop.html" frameborder="0" scrolling="no" id="test" onload="this.height=100"></iframe> <script type="text/javascript"> function reinitIframe(){ var iframe = document.getElementById("test"); try{ var bHeight = iframe.contentWindow.document.body.scrollHeight; var dHeight = iframe.contentWindow.document.documentElement.scrollHeight; var height = Math.max(bHeight, dHeight); iframe.height = height; console.log(height); }catch (ex){} } window.setInterval("reinitIframe()", 200); </script>
Prompt bar:
Tip: You can place the required text between
Tip: Use CSS to define styles for
Tips: The
Differences between HTML 4.01 and HTML5:
HTML5 adds some new attributes and removes some attributes in HTML 4.01.
Differences between HTML and XHTML:
In XHTML, the name attribute has been deprecated and will be removed. Please use the id attribute instead.
[Related recommendations]
What is the article tag in HTML5? Where is the article element used in HTML5?
The above is the detailed content of How to use HTML