Any way to seamlessly integrate an iFrame?

MuGeN

MuGeN

MuGeN

Associate
Joined
21 Oct 2008
Posts
1,679
Location
Mooching... in your house
I have to use an iFrame on a site (I know I know) and I don't like the way it adds a vertical scrollbar... is there any way at all to neatly integrate the iFrame so that the page expands to accommodate it so that essentially, its not obvious that the iFrame is there?

Any chance?
 
Theres the attribute scrolling="no" option and you can remove the border with the frameBorder attribute too.

You can also use width and height attribs on the iFrame and then use CSS with overflow hidden to control whether you can see the scrollbars/still scroll the content.
 
Surely those methods hide part of the iFrame content?

As far as I can tell, jQuery auto-resize plugins would do the job, but the content I am pulling in is on a separate domain so this puts a spanned in the works...

Basically, I think I need something to resolve the height of the iFrame and stick it in a variable somewhere so I can refer to it and plonk it in my css... or something like that? maybe?
 
Hey, first post in the forums, signed up last night after browsing through.

It might be worth contacting the owner/web master of the domain you are pulling the iframe from. Using AJAX with JSON would be the best bet for doing that sort of thing, also if you are allowed to..!

If not then you will have to use javascript. Something along the lines of...

ID the iframe tag in the html.

Create a new function called resize or something, use a var = call getElementById and use scrollHeight + 'px'. This will give you a CSS height attribute to load in to the page.

Remember and add the border=0 and frameborder=0 attributes to the iframe tag too.

That is just off the top of my head on what I would try, If you need help with the actual code involved I can give it a go.
 
You looked at server-side? In PHP you could use cURL to grab the page, use DOMDocument() to strip the content you need and this allows you to format it accordingly. Saves having to bodge an iFrame.
 
visibleman said:
You looked at server-side? In PHP you could use cURL to grab the page, use DOMDocument() to strip the content you need and this allows you to format it accordingly. Saves having to bodge an iFrame.
Click to expand...
that sounds like a monster job, the content i am pulling is pretty comprehensive... however another problem i've thought of is that the height of the iFrame changes based on the page changes that happen within the frame... this is going to be tricky isn't it...
 
Grabbing the page through PHP is dead easy, stripping the content is a little more difficult but personally i think the iFrame route is pretty much a no go as it's far too much of a bodge especially if you want to make it look 'integrated'.

Also make sure you have the permission to use information/content from the other site, otherwise you might find them blocking your IP/Domain.
 
It depends on what you are pulling and how often the content changes/ how often you want it to refresh.

If you do it with client side javascript etc... then depending on the rest of the site you may have high page load times especially with some of the ways you seem to be thinking like calculating the dimensions on the fly.

Using the CSS overflow and similar elements on the container will help, take a look at the options available.

Also never done much with it but using xpath could also be a option.

To me it would be better to use the server side (maybe PHP) let the server do the work and then store it somewhere which will help page load massively. Especially if you have a lot of client side scripting going on.

Other than that run some tests on your site to see what works out the best.

More detail would be helpful.
 
ok maybe i should explain a bit more then if you say cURL is still the best way of doing things then ill look into it...

I am embedding an online shop, the people that run the shop supply customised pages set up just for me and handed to me via an iFrame, i pay a monthly fee and get the shop on my site and get to sell stuff... in this shop there are a good 100 pages, including baskets, checkouts etc etc so do you still think ripping the content is a neater solution than trying to tame the iFrame height? (serious question)
 
That doesn't seem a very elegant way of supplying the page to me, but that isn't the question.

So you are pulling entire pages to mirror on your site?

Take a look at jQuery I am sure there are some plugins available that will help you work with iframes. Other options would be to pull the pages to your site and cache them to display them.

Another option is speak to them if they have others who use their service? Also bear in mind that if these are the same as pages on their site. Doing it this way will mean that it will be very hard to get a decent ranking in the search engines for those pages.

As with most things online there is not one answer there are always several ways of getting the same results. It all depends on your skill levels at scripting / coding / languages as to which is the best way for you.
 
Last edited:
No not elegant at all, let me rephrase though, they have supplied a fully working shop which can be visited on its own but they then recommend that plonking it in an iFrame is the easiest way to implement it... however i suppose if anyone can think of a better way i'm certainly not confined to iFrames, I do however want to leave the site intact rather than ripping elements from it as like I said, there is a lot of stuff.

So maybe I should have explained that first, in terms of iFrames, javascript solutions have real troubles apparently when working with an external domain, for example this gives "access denied" errors:

Code: 
<script language="JavaScript">
<!--
function calcHeight()
{
  //find the height of the internal page
  var the_height=
    document.getElementById('the_iframe').contentWindow.
      document.body.scrollHeight;

  //change the height of the iframe
  document.getElementById('the_iframe').height=
      the_height;
}
//-->

and edit this :

<iframe name="the_iframe" onLoad="calcHeight();" scrolling="no" width="730"  id="the_iframe" src="you_page.html" frameborder="0" allowtransparency="true"></iframe>

I have read that using <object> instead of <iframe> may be viable so I'll have to try and test that but I have a feeling it won't work cross-platform / cross-browser etc...

So I think I've given the whole picture now, open to any slick way to integrate their supplied pages ;)
 
It doesn't seem like the greatest way to set up an online shop via iframes. But...

You won't be able to rip the pages, unless you put in an awful lot of work. Or maybe I am thinking too much on it...

A run down of how both would work. An iframe is basically like a window or "portal" to another website. you could think of it as being a little web browser inside your web page almost. Requests made through the iframe are issued to the domain the iframe contents are hosted. So if you click "add to card" it will fire the request on the online shops domain.

If you rip the page contents, and load it from your domain, the requests made like "add to cart" will be issued to your domain. You will then have to create a way to transfer these requests to the online shop. As the script files and database are hosted there, it will be of no value on your hosting. You might be able to modify the links I guess so they fire to online shops domain and store the content data on your site, it depends how it works.

After reading your last post again, I think I understand how it works. A link to your domain and the online shop would be more helpful, though to see how it works.

My impression is you set up an online store with someone and it is hosted via a sub-domain or something similar? like www.mugens-shop.onlineshophosting.com ? but you just want it to be www.mugens-shop.com? If this is the case then what you could do is log in to where ever your domain name is managed and instead of the domain pointing to your hosting set it up as a redirect to the online shop.

so www.mugens-shop.onlineshophosting.com will work as well as www.mugens-shop.com.

Im probably thinking in the wrong direction, a link to the shop and to your site would be helpful to see what is going on.
 
Yes I've realised that cURL wont work due to links trying to work on my domain and even if i fiddled the links it still wouldn't work with the header from my site etc which needs to stay...

so in answer to your two recommendations, can't repoint the domain cuz its only on a certain page of my site, and secondly I need it (like i mentioned before) to maintain my header and footer for uniformity...

I think i'm still stuck with iFrames, but need to find a way to dynamically resize the iFrame based on the content which is the tricky bit due to security (cross-domain).
 
To be honest in 13 years working in web dev I have never had to do this so scrathching my head a bit.

If the above is not an option then the only thing I can suggest is that you are going to have to dynamically get the height of the page. For example with Javascript/php xpath may be able to do it you would have to read up on it.

If the iframe is inside a div could you not get the appearance you want with css styling and a little javascript? It would be awkward but possible because you wouldn't then be working on the other website just yours if that makes sense?
 
Last edited:
Staffy, that solution only works if the parent and the framed child are on the same domain as mentioned before, otherwise it kicks up access denied errors when trying to access DOM parameters...

Surely some parameter that is stored locally knows how large the frame is? I've spent a good few hours researching this and no answer has popped up yet... Am I chasing ghosts?
 
Have I missed why it's important to have the store pulled through? Everyone else is just linking to stores with consistent branding.
 
Didn't realise you were working with a Ecommerce, so ripping the page via server-side would be a no go.

Can you not ask them to template the shop to match your website? If so then just link to it.
 
MuGeN said:
Staffy, that solution only works if the parent and the framed child are on the same domain as mentioned before, otherwise it kicks up access denied errors when trying to access DOM parameters...

Surely some parameter that is stored locally knows how large the frame is? I've spent a good few hours researching this and no answer has popped up yet... Am I chasing ghosts?
Click to expand...

I think you maybe "chasing ghosts" as you put it. My next question is what gord said above and that is just link out to the pages somehow.

Other than that some very complicated php / cache / javascript solution would be needed which for the time and effort wouldn't be worth it. Of course you could try asking in one of the big webmaster forums to see if any off them can offer a solution. Not sure if we are allowed to linkto any so just use google.

Sorry I couldn't help any further than that to be honest.
 
I see what I want to do isn't going to be feasible, the shop i'm pulling in wont offer custom branding and besides the iFrame content is only inner-content with no top navigation etc (it really was, for better or worse, designed to be used in an iFrame).

For now, I think I live with scrollbars ;)

Thanks to you all for your input :)
 
You must log in or register to reply here.
Back
Top Bottom