Javascript iFrame search and replace innerHTML

Hi Guys,

Sometimes you have to have iFrames on your webpage but the content that is getting returned from your another page is not what exactly you want. Sometimes the Image paths are messed up as was the case with me, so you need to modify the HTML that is loaded within the IFrame so that the HTML appears the way you want after the ammendments.

You can have as many IFrames as you want on a given HTML page.

array has the pointer to each one of them.

IFrames can be accessed from your Javascript function as

My Iframe is declared as shown below

[geshi lang=”html5″ nums=”1″ target=”_self” ]



The content for this Iframe is coming from foobar.html now this file has a problem that all the Image addresses are Incorrect (assuming) so the

[geshi lang=”html5″ nums=”1″ target=”_self” ]

should be

[geshi lang=”html5″ nums=”1″ target=”_self” ]

So this is how I will change the Image paths so that the Images could be loaded properly

I will first add onLoad handler to my Iframe

[geshi lang=”html5″ nums=”1″ target=”_self” ]

My changePaths function will then look like this

[geshi lang=”javascript” nums=”1″ target=”_self” ]

And that’s pretty much it. All the paths now are changed and Images show up.

This was just an example handling the Image Paths. You can replace any text or even full HTML tags using the technique above.


I hope this helps




VN:F [1.9.22_1171]
Rating: 0.0/5 (0 votes cast)
VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

Leave a Reply