Javascript iframe border style

Содержание

HTML Iframes
HTML Iframe Syntax
Syntax
Example
Example
Iframe — Target for a Link
Example
Chapter Summary
HTML Exercises
HTML iframe Tag
COLOR PICKER
Report Error
Thank You For Helping Us!
HTML DOM IFrame Object
Access an IFrame Object
Example
Create an IFrame Object
Example
IFrame Object Properties
Standard Properties and Events
How to apply css to iframe in Html?
Method 1: Inline Style Attribute
Method 2: Stylesheet Linked to the Parent Page
Method 3: Stylesheet Linked to the Iframe Page
Method 4: CSS in the Parent Page Targeting the Iframe
Method 5: CSS in the Iframe Page Targeting the Parent Page

HTML Iframes

An HTML iframe is used to display a web page within a web page.

HTML Iframe Syntax

The HTML tag specifies an inline frame.

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

Syntax

description</em>«>

Tip: It is a good practice to always include a title attribute for the . This is used by screen readers to read out what the content of the iframe is.

Iframe — Set Height and Width

Use the height and width attributes to specify the size of the iframe.

The height and width are specified in pixels by default:

Example

Or you can add the style attribute and use the CSS height and width properties:

Example

Iframe — Remove the Border

By default, an iframe has a border around it.

To remove the border, add the style attribute and use the CSS border property:

Example

With CSS, you can also change the size, style and color of the iframe’s border:

Example

Iframe — Target for a Link

An iframe can be used as the target frame for a link.

The target attribute of the link must refer to the name attribute of the iframe:

Example

Chapter Summary

The HTML tag specifies an inline frame
The src attribute defines the URL of the page to embed
Always include a title attribute (for screen readers)
The height and width attributes specify the size of the iframe
Use border:none; to remove the border around the iframe

HTML Exercises

HTML iframe Tag

For a complete list of all available HTML tags, visit our HTML Tag Reference.

COLOR PICKER

Report Error

If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:

Thank You For Helping Us!

Your message has been sent to W3Schools.

Top References

Top Examples

Get Certified

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Источник

HTML DOM IFrame Object

The IFrame object represents an HTML element.

Access an IFrame Object

You can access an element by using getElementById():

Example

Tip: You can also access an element by using the window.frames property.

Create an IFrame Object

You can create an element by using the document.createElement() method:

Example

IFrame Object Properties

Property	Description
align	Not supported in HTML5. Use style.cssFloat instead. Sets or returns the value of the align attribute in an iframe
contentDocument	Returns the document object generated by an iframe
contentWindow	Returns the window object generated by an iframe
frameBorder	Not supported in HTML5. Use style.border instead. Sets or returns the value of the frameborder attribute in an iframe
height	Sets or returns the value of the height attribute in an iframe
longDesc	Not supported in HTML5. Sets or returns the value of the longdesc attribute in an iframe
marginHeight	Not supported in HTML5. Use style.margin instead. Sets or returns the value of the marginheight attribute in an iframe
marginWidth	Not supported in HTML5. Use style.margin instead. Sets or returns the value of the marginwidth attribute in an iframe
name	Sets or returns the value of the name attribute in an iframe
sandbox	Returns the value of the sandbox attribute in an iframe
scrolling	Not supported in HTML5. Sets or returns the value of the scrolling attribute in an iframe
seamless	Sets or returns whether an iframe should look like it is a part of the containing document (no borders or scrollbars), or not
src	Sets or returns the value of the src attribute in an iframe
srcdoc	Sets or returns the value of the srcdoc attribute in an iframe
width	Sets or returns the value of the width attribute in an iframe

Standard Properties and Events

The IFrame object also supports the standard properties and events.

Источник

How to apply css to iframe in Html?

Iframes are often used to embed other web pages into a current page, but it can be a challenge to apply CSS styles to the content within an iframe. There are several methods to apply CSS to an iframe, but each has its own limitations and considerations. Here are some ways to apply CSS to iframes:

Method 1: Inline Style Attribute

To apply CSS to an iframe using the inline style attribute, you can follow these steps:

iframe id="my-iframe" src="https://example.com">iframe>

iframe id="my-iframe" src="https://example.com" style="">iframe>

iframe id="my-iframe" src="https://example.com" style="border: 1px solid red; width: 100%; height: 500px;">iframe>

Here’s an example of applying a border and setting the width and height of the iframe using the inline style attribute:

iframe id="my-iframe" src="https://example.com" style="border: 1px solid red; width: 100%; height: 500px;">iframe>

You can also apply CSS to the content inside the iframe by targeting its body element using the contentDocument property.

iframe id="my-iframe" src="https://example.com">iframe>

var iframe = document.getElementById('my-iframe'); var iframeBody = iframe.contentDocument.body; iframeBody.style.backgroundColor = 'blue';

Here’s an example of changing the background color of the content inside the iframe to blue:

iframe id="my-iframe" src="https://example.com">iframe>

var iframe = document.getElementById('my-iframe'); var iframeBody = iframe.contentDocument.body; iframeBody.style.backgroundColor = 'blue';

That’s it! These are some examples of how to apply CSS to an iframe using the inline style attribute.

Method 2: Stylesheet Linked to the Parent Page

To apply CSS to an iframe using a stylesheet linked to the parent page, follow these steps:

Create a CSS file with the styles you want to apply to the iframe. Let’s call it «iframe-styles.css».
Link the CSS file to the parent page using the tag in the section of the HTML document. For example:

head> link rel="stylesheet" type="text/css" href="iframe-styles.css"> head>

iframe class="iframe-styling" src="https://www.example.com">iframe>

In the «iframe-styles.css» file, add a CSS rule that targets the class attribute of the tag. For example:

.iframe-styling  border: 2px solid red; width: 100%; height: 500px; >

This will apply a red border, set the width to 100%, and the height to 500 pixels to the iframe with the class attribute of «iframe-styling».

Here is the complete code example:

head> link rel="stylesheet" type="text/css" href="iframe-styles.css"> head> body> iframe class="iframe-styling" src="https://www.example.com">iframe> body>

.iframe-styling  border: 2px solid red; width: 100%; height: 500px; >

By following these steps, you can easily apply CSS styles to an iframe using a stylesheet linked to the parent page.

Method 3: Stylesheet Linked to the Iframe Page

To apply CSS to an iframe using a stylesheet linked to the iframe page, follow these steps:

Create a CSS file with the desired styles. For example, create a file named «iframe-style.css» with the following styles:

body  background-color: #eee; >

In the iframe page, link to the CSS file using the tag. For example, add the following code to the section of the iframe page:

head> link rel="stylesheet" type="text/css" href="iframe-style.css"> head>

In the parent page, add the allowfullscreen and seamless attributes to the tag. For example, add the following code to the parent page:

iframe src="iframe-page.html" allowfullscreen seamless>iframe>

That’s it! The CSS styles defined in the «iframe-style.css» file will be applied to the content of the iframe.

Here is the complete code for the iframe page:

DOCTYPE html> html> head> link rel="stylesheet" type="text/css" href="iframe-style.css"> head> body> h1>Hello World!h1> p>This is an example of an iframe.p> body> html>

And here is the complete code for the parent page:

DOCTYPE html> html> head> title>Parent Pagetitle> head> body> h1>Welcome to the Parent Pageh1> iframe src="iframe-page.html" allowfullscreen seamless>iframe> body> html>

Method 4: CSS in the Parent Page Targeting the Iframe

To apply CSS to an iframe using CSS in the parent page, you can use the contentDocument property of the iframe to target its contents. Here are the steps to do it:

iframe id="my-iframe" src="http://example.com">iframe>

#my-iframe  width: 100%; height: 300px; border: none; >

To target elements inside the iframe, you can use the contentDocument property to get the iframe’s document object. Here’s an example that changes the background color of a div inside the iframe:

#my-iframe  width: 100%; height: 300px; border: none; > #my-iframe .my-div  background-color: red; >

var iframe = document.getElementById('my-iframe'); var iframeDoc = iframe.contentDocument || iframe.contentWindow.document; var myDiv = iframeDoc.getElementById('my-div'); myDiv.style.backgroundColor = 'red';

If you want to apply styles to the entire iframe document, you can use the contentDocument property to add a tag to the iframe’s head:

#my-iframe  width: 100%; height: 300px; border: none; > #my-iframe body  background-color: red; >

var iframe = document.getElementById('my-iframe'); var iframeDoc = iframe.contentDocument || iframe.contentWindow.document; var style = iframeDoc.createElement('style'); style.innerHTML = 'body < background-color: red; >'; iframeDoc.head.appendChild(style);

That’s it! With these steps, you can easily apply CSS styles to an iframe using CSS in the parent page.

Method 5: CSS in the Iframe Page Targeting the Parent Page

To apply CSS to an iframe from the parent page, you can use the contentDocument property to access the iframe’s document object and then manipulate its CSS styles using JavaScript. Here is an example code snippet:

DOCTYPE html> html> head> title>Parent Pagetitle> style> iframe  width: 100%; height: 300px; > style> head> body> iframe id="myIframe" src="iframe.html">iframe> script> var iframe = document.getElementById('myIframe'); var iframeDoc = iframe.contentDocument || iframe.contentWindow.document; var style = document.createElement('style'); style.textContent = 'body '; iframeDoc.head.appendChild(style); script> body> html>

In this example, we have an iframe element with an ID of myIframe that loads the iframe.html file. In the parent page, we have defined some CSS styles for the iframe element itself.

To apply additional CSS styles to the iframe’s document, we first get a reference to the iframe element using getElementById . We then use the contentDocument property to get the iframe’s document object. If the iframe is from a different domain, we need to use contentWindow.document instead.

Next, we create a new style element using createElement and set its textContent property to the CSS styles we want to apply to the iframe’s document. In this case, we are setting the background color of the body element to #f0f0f0 .

Finally, we append the new style element to the head element of the iframe’s document using appendChild .

With this approach, you can apply any CSS styles you want to the iframe’s document from the parent page. Just make sure to wait for the iframe to load before trying to access its document object.

Источник

Читайте также: Одно число python задача

Javascript iframe border style

HTML Iframes

HTML Iframe Syntax

Syntax

Iframe — Set Height and Width

Example

Example

Iframe — Remove the Border

Example

Example

Iframe — Target for a Link

Example

Chapter Summary

HTML Exercises

HTML iframe Tag

COLOR PICKER

Report Error

Thank You For Helping Us!

Top Tutorials

Top References

Top Examples

Get Certified

HTML DOM IFrame Object

Access an IFrame Object

Example

Create an IFrame Object

Example

IFrame Object Properties

Standard Properties and Events

How to apply css to iframe in Html?

Method 1: Inline Style Attribute

Method 2: Stylesheet Linked to the Parent Page

Method 3: Stylesheet Linked to the Iframe Page

Method 4: CSS in the Parent Page Targeting the Iframe

Method 5: CSS in the Iframe Page Targeting the Parent Page