| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | ||||||
| 2 | 3 | 4 | 5 | 6 | 7 | 8 |
| 9 | 10 | 11 | 12 | 13 | 14 | 15 |
| 16 | 17 | 18 | 19 | 20 | 21 | 22 |
| 23 | 24 | 25 | 26 | 27 | 28 | 29 |
| 30 |
- evm
- SSR
- middleware
- REACT
- Interface
- blockchain
- Ethereum
- 기준
- hardhat
- CLASS
- graphQL
- 삶
- concept
- HTML
- API
- useState
- Redux
- error
- node.js
- typeScript
- CSS
- nextJS
- express.js
- Props
- bitcoin
- tailwindcss
- solidity
- web
- JavaScript
- built in object
- Today
- Total
ReasonJun
HTML : Iframe 본문
An iframe (short for inline frame) is an HTML element that allows you to embed another HTML document within the current document. It provides a way to display content from another source or website within your own web page. The content within the iframe is independent and can come from a different domain.
Here are some key points about iframes:
- Embedding Content: The primary purpose of an iframe is to embed content from another source into your web page. This can include external websites, videos, maps, or any other HTML content.
- Separate Document: The content within an iframe is loaded as a separate HTML document with its own <html>, <head>, and <body> tags. It functions as a self-contained unit within your web page.
- Cross-Domain Limitations: Due to security restrictions known as the same-origin policy, there are limitations on accessing and manipulating the content within an iframe if it originates from a different domain. JavaScript code running in the parent document cannot directly interact with the content inside the iframe, and vice versa, unless the child document explicitly allows it through techniques like postMessage API.
- Size and Positioning: You can control the size and positioning of an iframe using CSS properties like width, height, border, and margin. This allows you to define how much space the iframe occupies within the parent document.
- Loading External Content: When you specify a source URL (src) for an iframe, the browser fetches the content from that URL and renders it within the iframe. This can include static HTML files, dynamic server-generated content, or even entire web applications.
- Scrolling: If the content within an iframe is larger than the space available, scrollbars can automatically appear to allow users to navigate through the content. You can control the scrolling behavior using the scrolling attribute or CSS properties.
- Cross-Origin Communication: If you need to establish communication between the parent document and the content inside the iframe, you can use techniques like the postMessage API. This allows secure messaging and data exchange between different origins.
<!DOCTYPE html>
<html>
<head>
<title>Iframe Example</title>
</head>
<body>
<h1>Embedded Content Example</h1>
<h2>YouTube Video</h2>
<iframe width="560" height="315" src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<h2>Google Maps</h2>
<iframe width="600" height="450" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3876.782835424221!2d-122.08462778461867!3d37.42297563546973!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x808f7e198a02c3c9%3A0xe11ab1bc58cc3dc2!2sGolden%20Gate%20Bridge!5e0!3m2!1sen!2sus!4v1623531398245!5m2!1sen!2sus" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>
</body>
</html>In this example, we have two iframes embedded within the HTML document. The first iframe displays a YouTube video using the YouTube video URL as the source (src). The width and height attributes specify the dimensions of the iframe.
The second iframe shows a Google Maps embed. The src attribute contains the URL for embedding a specific location on the map. Again, the width and height attributes define the size of the iframe.
Iframes can be useful for scenarios where you want to embed external content within your web page while maintaining a degree of isolation and separation between the two. However, it's important to consider the security implications and potential cross-domain limitations when using iframes, especially when embedding content from untrusted sources.
'Frontend > HTML' 카테고리의 다른 글
| HTML : IndexedDB (0) | 2024.01.08 |
|---|---|
| HTML : Video (0) | 2023.06.06 |
| HTML : img / picture (0) | 2023.06.05 |
| HTML : BEM (Block Element Modifier) (0) | 2023.06.05 |
| HTML : Viewport / Open Graph / Twitter Cards / style / class / id (0) | 2023.06.05 |
