Monday, October 6, 2008

Displaying IFrame contents in DIV containers

There are a lot of situations, when we need to show a web-content from another URL on our web-site. The standard solution for these situations is the IFrame tag. But it's not good approach to use IFrame, because it's resource consuming approach. The better approach, of course, is to use DIV container, and show the needed content in it.
That is not hard in 90% of situations, but there are special cases, when we really need help.

The problem There is a flash movie on the target webpage, which takes flashvars as input, and uses them. But when we use the simple ([DIV].innerHTML = [Iframe].innerHTML) mechanism, we get for example the links not work, or some other issues with those movies.

The thing is, that when we are getting the OBJECT tag content using the innerHTML property, we get it modified, but not the original content. And the problem is that the modified content removes the "flashvars" attribute content.

The solution is to use some kind of ruse. Instead of using the innerHTML property to get all the inner PARAM objects, which represent the parameters, we are getting them directly through the document's getElementsByTag() method call, and passing "PARAM" as an argument. This returns the original list of params, which then can be applyed to the new created object element using document.createElement("object") syntax.

But there is one more situation left. Huge number of these movies use events, which are handled by the webpages. And those scripts are being defined in the header part of the page.
To be sure that those cases are also fixed, we should read all the script tags from the header of the page, and add them (dynamically creating new script tags on our document object, to make the browser to run through the code instructions, not to ignore them) to the header of our document.

So, wish now you will never face this problem.

No comments: