Home > Web Front-end > HTML Tutorial > How to use iframe in html? Introduction to the use of iframe tags in html

How to use iframe in html? Introduction to the use of iframe tags in html

不言
Release: 2018-10-18 10:17:41
Original
4473 people have browsed it

For friends who develop websites, the iframe tag must be familiar. The iframe element will create an inline frame (ie, inline frame) that contains another document. We can load other people's websites or this website on our own website pages. The content of other pages on the site, so this next article will introduce to you the use of iframe in html.

First of all, for the iframe tag, we already know that the iframe element will create an inline frame (that is, an inline frame) that contains another document. Then, let’s look directly at the iframe tag in html Detailed use of .

Let’s take a look at the attributes of the iframe tag:

1. align: left, right, top, middle, bottom. Specifies how this frame should be aligned relative to surrounding elements. Deprecated. Please use style code.

2. frameborder: 1, 0. Used to specify whether to display a border around the frame.

3. Height: pixels, %. Used to specify the height of the iframe.

4. longdesc: URL. Specifies a page that contains a longer description of the iframe.

5. marginheight: pixels. Define the top and bottom margins of the iframe.

6. marginwidth: pixels. Define the left and right margins of the iframe.

7. name: frame_name. Specifies the name of the iframe.

Note: If you want to open the link in an iframe when clicking a link on the page, you only need to change the name attribute in the iframe and the target attribute in the a tag (the target attribute of the tag specifies where to open the linked document) Just set it to the same value, for example:

<iframename="my"></iframe>
<ahref="http://www.php.cn" target="my"></a>
Copy after login

8, scrolling: yes, no, auto. Specifies whether to display scroll bars in iframe.

9. src: URL. Specifies the URL of the document to be displayed in the iframe.

10. width: pixels. %. Define the width of the iframe.

After reading the relevant knowledge about iframe tag attributes, let’s take a look at the use of iframe tags in html

Usually we use iframe to directly nest iframe tags on the page The specified src is enough

The example is as follows:

<!-- 
        <iframe> 标签规定一个内联框架
     这里写p 标签是为了看align的效果
     -->
     <p style="overflow: hidden;">这是一些文本。 这是一些文本。 这是一些文本。这是一些文本。 这是一些文本。 这是一些文本。
         <iframe name="myiframe" id="myrame" src="external_file.html" frameborder="0" align="left" width="200" height="200" scrolling="no">
            <p>你的浏览器不支持iframe标签</p>
        </iframe>
     这是一些文本。 这是一些文本。 这是一些文本。这是一些文本。 这是一些文本。 这是一些文本。</p>
Copy after login

The src attribute of the iframe in the above code is a local html page

The code is as follows:

<body>
    <div id="div" style="height: 300px; background: #ddd;">这是一个外部文件里面的内容</div>
</body>
<script>
    var div = document.getElementById("div");
    console.log(div);
</script>
Copy after login

Note: Any interactive parts are also written into this page, and the iframe will be automatically transferred to the imported page.

This article ends here. For more exciting content, you can pay attention to the php Chinese website! ! !

The above is the detailed content of How to use iframe in html? Introduction to the use of iframe tags in html. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
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
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template