How to use HTML tag? 4 simple ways to adjust the height of HTML tags-HTML Tutorial-php.cn

Home

Web Front-end

HTML Tutorial

How to use HTML tag? 4 simple ways to adjust the height of HTML tags

寻∝梦

Aug 16, 2018 pm 02:09 PM

How to use HTML tag? Do you know 4 simple ways to adjust the height of HTML<iframe> tags? This article introduces in detail how to use the HTML<iframe> tag and four highly simple ways to adapt the HTML<iframe> tag.

HTML What is the tag:

The tag specifies an inline frame.

An inline frame is used to embed another document within the current HTML document.

How to use the HTML tag: The

tag creates an inline frame that contains another document, effectively converting another HTML page into Embed into the current page. Please refer to the following example:

Mark an inline frame:

<iframe src="//www.w3cschool.cn"></iframe>

Copy after login

HTML tag attribute: </strong><br/></p><p><img src="/static/imghw/default1.png" data-src="https://img.php.cn//upload/image/659/725/380/1534387766737325.png" class="lazy" title="1534387766737325.png" alt="How to use HTML <iframe> tag? 4 simple ways to adjust the height of HTML <iframe> tags"/> </p><p><strong>Basic usage of HTML<iframe> tag: </strong></p><p>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. </p><p>Advantages: Improve the reuse rate of page code and let us be lazy. </p><p>Disadvantages: The page URL address has not changed. </p><p><strong>3 methods for iframe height adaptation: </strong></p><p>iframe content is unknown and highly predictable</p><p>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: </p><p>1. (If information is exchanged between different subdomains under the same top-level domain name, set document.domain="caibaojian.com")</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>// 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(&#39;external-frame&#39;)); };</pre><div class="contentsignin">Copy after login</div></div><p>2 .Call for the known iframe ID: <br/></p><p> 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. </p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'><iframe src="backtop.html" frameborder="0" scrolling="no" id="external-frame" onload="setIframeHeight(this)"></iframe></pre><div class="contentsignin">Copy after login</div></div><p>3. The iframe height adapts when the content width changes: </p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>function iframeAutoFit(iframeObj){ setTimeout(function(){if(!iframeObj) return;iframeObj.height=(iframeObj.Document?iframeObj.Document.body.scrollHeight:iframeObj.contentDocument.body.offsetHeight);},200) }</pre><div class="contentsignin">Copy after login</div></div><p>4. Open the debugging run window and you can see the running: </p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'><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></pre><div class="contentsignin">Copy after login</div></div><p><strong>Prompt bar:</strong></p> <p>Tip: You can place the required text between <iframe> and to cope with browsers that do not support .

Tip: Use CSS to define styles for (including scrollbars).

Tips: The tag is mainly used for those parts that are common to multiple web pages, such as navigation bars, advertising columns, etc.

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 are the new structural elements of HTML5? Usage of new structural elements in HTML5 (recommended)

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 tag? 4 simple ways to adjust the height of HTML tags. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress images for free

Clothoff.io

AI clothes remover

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Show More

Hot Article

Assassin's Creed Shadows: Seashell Riddle Solution
4 weeks ago By DDD

What's New in Windows 11 KB5054979 & How to Fix Update Issues
3 weeks ago By DDD

Where to find the Crane Control Keycard in Atomfall
4 weeks ago By DDD

Roblox: Dead Rails - How To Complete Every Challenge
1 months ago By DDD

Atomfall guide: item locations, quest guides, and tips
1 months ago By DDD

Show More

Hot Tools

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Show More

Hot Topics

Where is the login entrance for gmail email?

7699

15

Java Tutorial

1640

14

CakePHP Tutorial

1393

52

Laravel Tutorial

1287

25

PHP Tutorial

1230

29

Show More

Related knowledge

Is HTML easy to learn for beginners? Apr 07, 2025 am 12:11 AM
HTML is suitable for beginners because it is simple and easy to learn and can quickly see results. 1) The learning curve of HTML is smooth and easy to get started. 2) Just master the basic tags to start creating web pages. 3) High flexibility and can be used in combination with CSS and JavaScript. 4) Rich learning resources and modern tools support the learning process.

The Roles of HTML, CSS, and JavaScript: Core Responsibilities Apr 08, 2025 pm 07:05 PM
HTML defines the web structure, CSS is responsible for style and layout, and JavaScript gives dynamic interaction. The three perform their duties in web development and jointly build a colorful website.

What is an example of a starting tag in HTML? Apr 06, 2025 am 12:04 AM
AnexampleofastartingtaginHTMLis,whichbeginsaparagraph.StartingtagsareessentialinHTMLastheyinitiateelements,definetheirtypes,andarecrucialforstructuringwebpagesandconstructingtheDOM.

Understanding HTML, CSS, and JavaScript: A Beginner's Guide Apr 12, 2025 am 12:02 AM
WebdevelopmentreliesonHTML,CSS,andJavaScript:1)HTMLstructurescontent,2)CSSstylesit,and3)JavaScriptaddsinteractivity,formingthebasisofmodernwebexperiences.

Gitee Pages static website deployment failed: How to troubleshoot and resolve single file 404 errors? Apr 04, 2025 pm 11:54 PM
GiteePages static website deployment failed: 404 error troubleshooting and resolution when using Gitee...

How to implement adaptive layout of Y-axis position in web annotation? Apr 04, 2025 pm 11:30 PM
The Y-axis position adaptive algorithm for web annotation function This article will explore how to implement annotation functions similar to Word documents, especially how to deal with the interval between annotations...

HTML, CSS, and JavaScript: Essential Tools for Web Developers Apr 09, 2025 am 12:12 AM
HTML, CSS and JavaScript are the three pillars of web development. 1. HTML defines the web page structure and uses tags such as, etc. 2. CSS controls the web page style, using selectors and attributes such as color, font-size, etc. 3. JavaScript realizes dynamic effects and interaction, through event monitoring and DOM operations.

How to use CSS3 and JavaScript to achieve the effect of scattering and enlarging the surrounding pictures after clicking? Apr 05, 2025 am 06:15 AM
To achieve the effect of scattering and enlarging the surrounding images after clicking on the image, many web designs need to achieve an interactive effect: click on a certain image to make the surrounding...

See all articles