Welcome to Geeklog Saturday, March 28 2020 @ 05:24 pm EDT

Geeklog Forums

IFrame Auto Resize - Cross Site Issue


Belboz

Anonymous
angry
Yes, I know the problems with cross site iframe auto sizing.

What I need help with is how to modify my script below that works well for my internal site, but the frame collapses when referencing an external site. I am hoping there is some kind of IF statement I can insert that makes the frame size 1000 for external sites, and uses the resized values for my internal site.

Thanks in advance...

<script>
<!--
function resize_iframe(){
document.getElementById("MainWindow"Wink.height=100
document.getElementById('MainWindow'Wink.height=window.frames["MainWindow"].document.body.scrollHeight + 20
}
// -->
</script>

<IFRAME src="home.htm" scrolling="auto" ID=MainWindow NAME=MainWindow WIDTH=1012 onLoad=resize_iframe();></IFRAME>

:chestslam:
 Quote

Status: offline

Laugh

Site Admin
Admin
Registered: 27/09/05
Posts: 1387
Some ideas.

Can you use percents instead of pixels for width?

If this iFrame is in a template (as appose to a staticpage) you could create a custom template variable.
One of the Geeklog Core Developers.
 Quote

Arnold

Anonymous
Thanks for the reply...

It isn't a width thing, it is a height thing.

Essentially, I was hoping to find an IF statement I could insert before the script. IF it is an external site, or the value is null, then the function isn't executed and the HEIGHT is set to a default. Otherwise, the Script is exercised....

Thanks for any help....

Arnold
 Quote

Status: offline

Laugh

Site Admin
Admin
Registered: 27/09/05
Posts: 1387
In Javascript you could do something like (this is not tested):

PHP Formatted Code

if ( location.hostname == "yourdomain.com" ) {
        Your domain code here
} else {
        External site code here
}
 

One of the Geeklog Core Developers.
 Quote

Arnold

Anonymous
I gave it a shot, but to no avail. Thanks, though....

I am sort of at a happy medium. I put the code below. I'm a novice, so no critquing the format. And yes, I hear people talking bout DON"T USE IFRAMES, but it is what I know.

Essentially, what happens is when I go to the site, the Frame starts out at the 1000 default, and then when referencing pages on my site, the script adjusts the height based on size. I reset the size to zero in the ELSE statement so that it always starts small and expands. Otherwise, there are times when the frame is tall, but the text small.

I have no clue what to put in for the positive portion of the IF. No matter what I put in, the iFrame now is the size of the last internal site visited. Even if I set the height in there to a million, or zero, the frame still stays the same size as the last internal site that used the frame.

The funny thing is, if I didn't have the IF statement, and just put in

document.getElementById("MainWindow"Wink.height=0
document.getElementById('MainWindow'Wink.height=window.frames["MainWindow"].document.body.scrollHeight + 20

inside the function, the external site collapses collapses the iFrame to 0. So, the external site is still looking for the function and at times will adjust the height, but I have no idea why it won't change it inside the IF function. It seems the function is highly dynamic, and I don't have that much control over it....

Sorry for the verbosity.... Any thoughts?

Since I'm at that happy medium, and just stuck with a scroll bar for external sites, it isn't a huge deal. But, having started, I'd like to understand the problem.

Thanks again....

Arnold



<script>
<!--
function resize_iframe()
{
if (window.frames["MainWindow"].document.body.scrollHeight=0)
{
WHAT SHOULD I PUT HERE???? EVEN USING document.getElementById("MainWindow"Wink.height=1000000000 DOES NOTHING
}
else
{
document.getElementById("MainWindow"Wink.height=0
document.getElementById('MainWindow'Wink.height=window.frames["MainWindow"].document.body.scrollHeight + 20
}
}
// -->

<IFRAME src="home.htm" scrolling="auto" ID=MainWindow NAME=MainWindow HEIGHT=1000 WIDTH=1012 onLoad=resize_iframe();></IFRAME>
 Quote

Arnold

Anonymous
excited
Just to close out the thread, here is how I resolved the issue....



I used the above script. It adjusts the frame height size for internal pages.

For referencing external pages, like I said, the frame would collapse. This was because, in the script, I set the height to zero. The purpose behind this was so that the frame always GREW to the correct size. Otherwise, the next frame visited, if smaller in height by 1000px, would not shrink. It would remain the same LARGE height as the previous frame. Hence, I shrunk it to 0.

I suppose I could have made it 600, so that it would always be at least that high.

However, I wanted my internal pages to shrink to 500 if needed, and my external to be 1000.

To solve this, for an external frame reference, I created an internal blank page, with a 1000px high table. Then, I put the frame inside of the table. So, when referencing this page, the base frame would adjust to the internal height, which is the 1000px high table with a 1000px heigh frame inside of it. So, a frame inside a table inside a frame.

Convoluted, yes. But, I'm happy with the results, despite all of you NO TABLES and NO FRAMES people out there.

Good Luck to All....

:banana: :banana: :banana: :banana: :banana: :banana: :banana: :banana: :banana: :banana: :banana: :banana: :banana: :banana: :banana: :banana: :banana: :banana: :banana: :banana: :banana: :banana: :banana: :banana:
 Quote

Nagendra Kumar

Anonymous
Why to Compromise, when there is a solution available for Cross Domain Iframe ReSizing .. Let me explain you breifly .. You need to have 2 pages in Domain X , 1 Page in Domain Y which is Iframe Page I believe Its Better to see this Article which Explain you in Detail .. http://www.ittreats.com/os/javascript/auto-resizing-iframe-height-in-the-page.html
 Quote

All times are EDT. The time is now 05:24 pm.

  • Normal Topic
  • Sticky Topic
  • Locked Topic
  • New Post
  • Sticky Topic W/ New Post
  • Locked Topic W/ New Post
  •  View Anonymous Posts
  •  Able to post
  •  Filtered HTML Allowed
  •  Censored Content