Google Sign in options
Remember me
This is not recommended for shared computers

Privacy Policy
Sign In
Create Account

Javascript Disabled Detected

You currently have javascript disabled. Several functions may not work. Please re-enable javascript to access full functionality.

Subscribe to HRA Now!

SEO Class in Chicago, IL

Learn How To Optimize Your Website on July 26, 2013

Looking for personalized in-depth SEO training among your peers?

High Rankings is offering a 1-day customized SEO training class in Chicago. Class size is limited so please sign-up now if you want in!

Are you a Google Analytics enthusiast?

Share and download Custom Google Analytics Reports, dashboards and advanced segments--for FREE!

www.CustomReportSharing.com

From the folks who brought you High Rankings!

Inline Iframe

Started by madams , Aug 05 2009 07:30 AM

Please log in to reply

9 replies to this topic

#1 madams

HR 5

Active Members
504 posts

Location:Costa Blanca, Spain

Posted 05 August 2009 - 07:30 AM

Hi

I am delivering content to my site via an inline frame.

Cant change that end, so,...

The recommended hight of the frame is 4000px

This is fine for showing item "details" but on the products page it leaves a large empty gap at the bottom of the page because the products only take up aprox 1200px in hight.

Hope this makes sence.

I wondered if there was a way to make the inline frame adjust to the hight of the content.

Code below...

CODE

Back to top

#2 1dmf

Keep Asking, Keep Questioning, Keep Learning

Active Members
2,154 posts

Location:Worthing - England

Posted 05 August 2009 - 07:53 AM

I believe you can use the CSS height attribute with auto, don't know if it works on iframes.

you could try the min-height attribute, but this only works on IE7+

CODE

min-height:500px;
height:auto;

the only other way might be to set a fixed height with overflow:auto;
but that wil give you scroll bars rather than change the actual height of the element.

Back to top

#3 Katy

HR 3

Active Members
68 posts

Location:Oxford, England

Posted 05 August 2009 - 10:31 AM

The following will resize the iframe based on the height of the page being pulled into it - but it will only work if the page you're pulling into the iframe is stored on the same server/PC as the page containing it.

CODE

<html>
<head>
<title>Resizeable Iframe Example</title>
<script type="text/javascript">
function loadframe()
{
var frame1="";
frame1 = document.getElementById('NewsFrame1');

     if(frame1!=null)
     {
         //alert(frame1.contentWindow.document.body.scrollHeight);
         frame1.style.height = frame1.contentWindow.document.body.scrollHeight + "px";
     }
}
</script>

</head>
<body onload="loadframe()">
<p>This is a page with some iframes in it </p>
<h1> Frame 1</h1>
<iframe src="test2.html" style="height: 272px;width:100%;border:1px solid red" id="NewsFrame1" name="NewsFrame1" frameborder="0" border="0" scrolling="no"></iframe>

</body>
</html>

Back to top

#4 1dmf

Keep Asking, Keep Questioning, Keep Learning

Active Members
2,154 posts

Location:Worthing - England

Posted 05 August 2009 - 10:35 AM

Note: Katy's example requires Javascript enabled browsers, so it depends on your accessibility requirements as to whether this is a viable option!

Back to top

#5 madams

HR 5

Active Members
504 posts

Location:Costa Blanca, Spain

Posted 05 August 2009 - 10:56 AM

Thanks 1dmf and Katy

The page is not stored on the same server, unfortunately.

The CSS didn't work either.

Back to top

#6 1dmf

Keep Asking, Keep Questioning, Keep Learning

Active Members
2,154 posts

Location:Worthing - England

Posted 05 August 2009 - 11:15 AM

is there any reason why you use an iframe ?

You could use some form of include perhaps?

that way it becomes part of your actual page rather than a frame and you can control the div tag as much as you like with CSS that way

Back to top

#7 madams

HR 5

Active Members
504 posts

Location:Costa Blanca, Spain

Posted 05 August 2009 - 11:45 AM

Interesting 1dmf

How would I control the hight this way?

If I created an include with...

CODE

...and placed the include into the page, what css will I need?

Is this possible?

Thanks by the way

Back to top

#8 Randy

Convert Me!

Moderator
17,540 posts

Posted 05 August 2009 - 06:50 PM

With a normal type of include you wouldn't have to even attempt to define the height essentially. It would end up looking just like the content was a part of the page, just like other content. So it could just write to the page via the include and when it ends the page ends.

Back to top

#9 1dmf

Keep Asking, Keep Questioning, Keep Learning

Active Members
2,154 posts

Location:Worthing - England

Posted 06 August 2009 - 03:41 AM

madams, you wouldn't use an iframe at all.

and the include command depends on the language you will be using, for PHP you could use...

CODE

<? readfile("http://example.com/b.inc"); ?>

for PERL you need to be a bit more clever using a mixture of SSI and PERL code..

CODE

then the PERL script...

CODE

use LWP::Simple;
print "Content-type:text/html\n\n";
getprint ($ENV{'QUERY_STRING'});

From what i can tell you can't use a straight forward SSI (Server Side Include) as it only allows files to be included that reside on the the same server!

Let me know if you need anymore help.

Back to top

#10 WavyDavy

HR 1

Members
1 posts

Location:australia

Posted 11 April 2012 - 03:01 AM

I certainly could use some help I am trying to include a page from another website which normally uses iframes (which is really bad for SEO).

This is the code I have for my htaccess file

Options +Includes<br><br>XBitHack on

This is the code for my proxy.pl file (located in cgi bin of xampp folder)

use LWP::Simple;<br>print "Content-type:text/html\n\n";<br>getprint ($ENV{'QUERY_STRING'});

This is the code for my html file except for the url which has been changed to example.com

&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;<br>&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;<br>&lt;head&gt;<br>&lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /&gt;<br><br>&lt;/head&gt;<br><br>&lt;body&gt;<br>&lt;div class="noq-wrapper"&gt;!--#include VIRTUAL="/cgi-bin/proxy.pl?http://example.com" --&gt; &lt;/div&gt;<br>&lt;/body&gt;<br>&lt;/html&gt;