PDA

View Full Version : Exclude some files from iframe ssi script?



Peter Johnson
03-02-2008, 05:01 PM
1) Script Title: Iframe SSI Script

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex17/iframessi2.htm

3) Describe problem:
I am using the Iframe SSI script on one of my websites. Works great. But there are 2 files (very long lists of URL's) and I would prefer if they were loaded in an iframe with a set height.
Is there some way to alter the script to do this?
Also - if it is possible in the first place - when a link within these files is clicked, could the page containing the iframe go back to re-sizing?
Thank you in advance. Here's the script I'm using (I think it's an older version) I've tried adding an if/else statement (in red), but I leaves everything a blank.


<script type="text/javascript">
/***********************************************
* IFrame SSI script II- Dynamic Drive DHTML code library (http://www.dynamicdrive.com)
* Visit DynamicDrive.com for hundreds of original DHTML scripts
* This notice must stay intact for legal use
***********************************************/
var whatsloaded = document.getElementById('mainframe').src;
if (whatsloaded != "noresize-for-me.htm")
{
var iframeids=["mainframe"]

var iframehide="yes"

function resizeCaller() {
var dyniframe=new Array()
for (i=0; i<iframeids.length; i++){
if (document.getElementById)
resizeIframe(iframeids[i])

if ((document.all || document.getElementById) && iframehide=="no"){
var tempobj=document.all? document.all[iframeids[i]] : document.getElementById(iframeids[i])
tempobj.style.display="block"
}
}
}

function resizeIframe(frameid){
var currentfr=document.getElementById(frameid)
if (currentfr && !window.opera){
currentfr.style.display="block"
if (currentfr.contentDocument && currentfr.contentDocument.body.offsetHeight) //ns6 syntax
currentfr.height = currentfr.contentDocument.body.offsetHeight;
else if (currentfr.Document && currentfr.Document.body.scrollHeight) //ie5+ syntax
currentfr.height = currentfr.Document.body.scrollHeight;
if (currentfr.addEventListener)
currentfr.addEventListener("load", readjustIframe, false)
else if (currentfr.attachEvent){
currentfr.detachEvent("onload", readjustIframe) // Bug fix line
currentfr.attachEvent("onload", readjustIframe)
}
}
}

function readjustIframe(loadevt) {
var crossevt=(window.event)? event : loadevt
var iframeroot=(crossevt.currentTarget)? crossevt.currentTarget : crossevt.srcElement
if (iframeroot)
resizeIframe(iframeroot.id);
}

function loadintoIframe(iframeid, url){
if (document.getElementById)
document.getElementById(iframeid).src=url
}

if (window.addEventListener)
window.addEventListener("load", resizeCaller, false)
else if (window.attachEvent)
window.attachEvent("onload", resizeCaller)
else
window.onload=resizeCaller
}
</script>

jscheuer1
03-02-2008, 07:08 PM
I would think that to get the src of the iframe and have it mean anything, you would have to actually change it when switching the page in the iframe. This is cumbersome. However, an ordinary link will change the iframe's location href, but this is not a property of the iframe, rather a property of the window.frames object. It can be worked out. I would do something like so, instead of:



var whatsloaded = document.getElementById('mainframe').src;
if (whatsloaded != "noresize-for-me.htm")
{

I would do something like:


var excludes=['noresize-for-me.htm', 'noresize-for-me-2.htm'];

var testloaded = function(id){
var fobjs=window.frames, fels=document.getElementsByTagName('iframe');
for (var i = fels.length-1; i > -1; --i)
if(fels[i].id==id)
var h = fobjs[i].location.href.replace(/^.*\/([^\/]*)/, '$1');
for (var j = excludes.length-1; j > -1; --j)
if(excludes[j]==h)
return false;
return true;
}

Then in the portion where the script starts to get to work on resizing any given iframe:


function resizeIframe(frameid){
if(frameid&&!testloaded(frameid))
return;
var currentfr=document.getElementById(frameid)
if (currentfr && !window.opera){
currentfr.style.display="block"
if (currentfr.contentDocument && curre

Peter Johnson
03-02-2008, 07:27 PM
Thanks John. Ive tried what you suggested. But it still just resizes everything (which is better than my version, which made nothing show up at all, but...) whether it's the page it starts with or a link. Here's what I've got. (I added a height to the iframe in the body, so it would have a default if the resize didn't happen)


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script type="text/javascript">
/***********************************************
* IFrame SSI script II- Dynamic Drive DHTML code library (http://www.dynamicdrive.com)
* Visit DynamicDrive.com for hundreds of original DHTML scripts
* This notice must stay intact for legal use
***********************************************/
var excludes=['test2.htm', 'test1.htm'];

var testloaded = function(id){
var fobjs=window.frames, fels=document.getElementsByTagName('iframe');
for (var i = fels.length-1; i > -1; --i)
if(fels[i].id==id)
var h = fobjs[i].location.href.replace(/^.*\\([^\\]*)/, '$1');
for (var j = excludes.length-1; j > -1; --j)
if(excludes[j]==h)
return false;
return true;
}


var iframeids=["mainframe"]

var iframehide="yes"

function resizeCaller() {
var dyniframe=new Array()
for (i=0; i<iframeids.length; i++){
if (document.getElementById)
resizeIframe(iframeids[i])

if ((document.all || document.getElementById) && iframehide=="no"){
var tempobj=document.all? document.all[iframeids[i]] : document.getElementById(iframeids[i])
tempobj.style.display="block"
}
}
}

function resizeIframe(frameid){
if(frameid&&!testloaded(frameid))
return;
var currentfr=document.getElementById(frameid)
if (currentfr && !window.opera){
currentfr.style.display="block"
if (currentfr.contentDocument && currentfr.contentDocument.body.offsetHeight) //ns6 syntax
currentfr.height = currentfr.contentDocument.body.offsetHeight;
else if (currentfr.Document && currentfr.Document.body.scrollHeight) //ie5+ syntax
currentfr.height = currentfr.Document.body.scrollHeight;
if (currentfr.addEventListener)
currentfr.addEventListener("load", readjustIframe, false)
else if (currentfr.attachEvent){
currentfr.detachEvent("onload", readjustIframe) // Bug fix line
currentfr.attachEvent("onload", readjustIframe)
}
}
}

function readjustIframe(loadevt) {
var crossevt=(window.event)? event : loadevt
var iframeroot=(crossevt.currentTarget)? crossevt.currentTarget : crossevt.srcElement
if (iframeroot)
resizeIframe(iframeroot.id);
}

function loadintoIframe(iframeid, url){
if (document.getElementById)
document.getElementById(iframeid).src=url
}

if (window.addEventListener)
window.addEventListener("load", resizeCaller, false)
else if (window.attachEvent)
window.attachEvent("onload", resizeCaller)
else
window.onload=resizeCaller

</script>


</head>
<body>

<iframe id="mainframe" src="test1.htm" scrolling="no" width="550" height="200"></iframe>

</body>
</html>

jscheuer1
03-02-2008, 07:49 PM
I didn't test my code, so either I made a typo or you installed it incorrectly, or . . . there can always be other factors.

Ah, I see a typo:


location.href.replace(/^.*\\([^\\]*)/, '$1')

should be:


location.href.replace(/^.*\/([^\/]*)/, '$1')

One thing that might not have been obvious is, that in the array of excludes, you should only put the filename, no path, as the testloaded function strips the path from the location.href. I'll fix it in the original.

Peter Johnson
03-02-2008, 08:11 PM
WOW - it works now. Thank you so much.
One more question - it doesn't automatically resize when another page (not in the excluded list) is clicked on. But I notice that if I refresh the page, with the new non-excluded page, it then does re-size. Is there any way to have the page reload just one more time after the new page is clicked?

jscheuer1
03-02-2008, 08:33 PM
Let's try getting rid of:


if(frameid&&!testloaded(frameid))
return;

Then in the readjustIframe function add:


function readjustIframe(loadevt) {
var crossevt=(window.event)? event : loadevt
var iframeroot=(crossevt.currentTarget)? crossevt.currentTarget : crossevt.srcElement
if (iframeroot&&iframeroot.id&&testloaded(iframeroot.id))
resizeIframe(iframeroot.id);
}

If that doesn't get it:

Please post a link to the page on your site that contains the problematic code so we can check it out.

Peter Johnson
03-02-2008, 09:01 PM
No - making those last changes just causes everything to re-size.

The page isn't up, so I created a test site at http://users.abac.com/veronicam/iframe_resize_script.htm

It starts with a page that shouldn't be resized. When you click the link for "link to test 2" that page SHOULD be resized, but isn't until you refresh the page.

I also created a page with it in reverse http://users.abac.com/veronicam/iframe_resize_script2.htm The initial page should be resized, then the link to "test 1" should not. Again, the second page works correctly, but only after you refresh the page.

Although I just noticed another issue - there's no scrollbar, and thus no way to read the content that's not visible ...

BTW - thank you for spending so much time on this.

jscheuer1
03-03-2008, 03:46 AM
The order in which things were happening was all wrong, and some key data was missing. That's what I get for not testing this, but I was busy with some real work. Using your demo, I came up with (too many changes to highlight):


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script type="text/javascript">
/***********************************************
* IFrame SSI script II- Dynamic Drive DHTML code library (http://www.dynamicdrive.com)
* Visit DynamicDrive.com for hundreds of original DHTML scripts
* This notice must stay intact for legal use
***********************************************/
var excludes=[['test1.htm', 200], ['test_whatever.htm', 400]];

var testloaded = function(id){
var fobjs=window.frames, fels=document.getElementsByTagName('iframe');
for (var i = fels.length-1; i > -1; --i)
if(fels[i].id==id)
break;
var h = fobjs[i].location.href.replace(/^.*\/([^\/]*)/, '$1');
for (var j = excludes.length-1; j > -1; --j)
if(excludes[j][0]==h){
fels[i].height=excludes[j][1];
return false;
}
return true;
}


var iframeids=["mainframe"]

var iframehide="yes"

function resizeCaller() {
var dyniframe=new Array()
for (i=0; i<iframeids.length; i++){
if (document.getElementById)
resizeIframe(iframeids[i])

if ((document.all || document.getElementById) && iframehide=="no"){
var tempobj=document.all? document.all[iframeids[i]] : document.getElementById(iframeids[i])
tempobj.style.display="block"
}
}
}

function resizeIframe(frameid){
var currentfr=document.getElementById(frameid)
if (currentfr && !window.opera){
if (currentfr.addEventListener)
currentfr.addEventListener("load", readjustIframe, false)
else if (currentfr.attachEvent){
currentfr.detachEvent("onload", readjustIframe) // Bug fix line
currentfr.attachEvent("onload", readjustIframe)
}
if(frameid&&!testloaded(frameid))
return;
currentfr.style.display="block"
if (currentfr.contentDocument && currentfr.contentDocument.body.offsetHeight) //ns6 syntax
currentfr.height = currentfr.contentDocument.body.offsetHeight;
else if (currentfr.Document && currentfr.Document.body.scrollHeight) //ie5+ syntax
currentfr.height = currentfr.Document.body.scrollHeight;
}
}

function readjustIframe(loadevt) {
var crossevt=(window.event)? event : loadevt
var iframeroot=(crossevt.currentTarget)? crossevt.currentTarget : crossevt.srcElement
if (iframeroot)
resizeIframe(iframeroot.id);
}

function loadintoIframe(iframeid, url){
if (document.getElementById)
document.getElementById(iframeid).src=url
}

if (window.addEventListener)
window.addEventListener("load", resizeCaller, false)
else if (window.attachEvent)
window.attachEvent("onload", resizeCaller)
else
window.onload=resizeCaller

</script>


</head>
<body>


<iframe id="mainframe" src="test1.htm" scrolling="auto" width="550" height="200"></iframe>


</body>
</html>

The major change that needs to be taken into account from your point of view is that the excludes array is now multidimensional, with each entry itself also being an array. The second part of each of these is the default height for the iframe for that excluded page.

Peter Johnson
03-03-2008, 04:31 AM
This is fantastic - I can not thank you enough. Those for whom you are doing your "real work" (especially if it involves coding) are very lucky to have you.
Thanks again.