How to Replace Elements in Iframe
Replace elements within an HTML inline frame or "iFrame" to alter the final appearance of the frame on your site. HTML iFrames code consolidates the coding for all elements within the inline frame, much like an HTML table. On Facebook, for example, an iFrame may contain a "Like" button and a list of people who like the site. Replace elements that have to do with design or content, depending on what you want to change.
Other People Are Reading
Instructions
-
-
1
Copy the existing iFrame code off its website of origin. Open the page of your website where you eventually want the frame to appear, then paste the frame in, so that you can modify it there.
-
2
Replace design elements within the frame to control different elements of the design. If the frame includes a "height" attribute as follows, for example:
<iframe>
<div id="iframe"><href="http://mywebsite.com/feed/" height="450" font="arial"></div>
</iframe>
Replace the "height" element with a "width" element and a corresponding width in pixels if the height of the frame doesn't matter, but width does.
-
-
3
Replace the value behind a "div id" to adjust the style of the entire frame, according to a style you already use within your cascading style sheet, or CSS document. If you want the iFrame to be styled the same as your website header, for example, change <div id="iframe"> to <div id="header">.
-
4
Edit URL content within the iFrame to change the information that displays within the frame. If you display a feed of your website's content, for example, and want to change it to another site's feed, change the code from this:
<iframe>
<div id="iframe"><href="http://mywebsite.com/feed/" height="450" font="arial"></div>
</iframe>
To this:
<iframe>
<div id="iframe"><href="http://myotherwebsite.com/feed/" height="450" font="arial"></div>
</iframe>
-
5
Save the iFrame once you've replaced all the elements you need to replace. View the page in a separate browser window to make sure it looks right.
-
1
