Frame detection possible?

Comatose 290 Taboo Programmer Team Colleague · 2006-05-23T03:00:01+00:00

well, you can check this way:

if (top.location != location) {
     alert("In A Frame");
}

But I'm not sure if you can do it like a conditional compiler directive. I know you could write to the page with something fun like:

document.write("<Script Language='javascript' SRC='http://page.com/somefile.jsp'>");

but I know that you will need to open and close the document, and I don't know how well that will mingle with the rest of your HTML page....

I don't see the problem personally with having the header file referenced in each page, does it cause some kind of conflict error having it loaded for each page?

Let me know how it turns out for you.

<!-- I dunno -->
<HTML>
<HEAD>
	<TITLE>Testing App</TITLE>
	<SCRIPT LANGUAGE="Javascript">
	if (top.location != location) {
	     /* In A Frame, Don't Load The Header File */
	} else {
	     /* Not In A Frame, Load The Header File */
	     document.open;
	     document.write("<SCRIPT LANGUAGE='Javascript' SRC='http://www.yourpage.com/file.js'>");
	     document.close;
	}
	</SCRIPT>
</HEAD>
<BODY BGCOLOR="#000000" TEXT="#FFFFFF">
Test
</BODY>
</HTML>

sjklein 0 Newbie Poster · 2006-05-23T03:25:02+00:00

Thanks for the response.

I tried the following:

<script language="javascript">
if (top.location == location) {
   document.write("<jsp:include page='header.jsp' />");
}
</script>

Unfortunately, it didn't work. Can you explain why? I'm trying to understand what I'm doing when things do or don't work like I think they will.

The problem I'm trying avoid is that sometimes, I end up with a double header.

For example, let's say I have main.jsp which sets up the frame. It calls header.jsp, which is good because I want the header at the top.

I also have a page called SystemDetail.jsp. Sometimes SystemDetail.jsp is called by itself, in which case I would want it to include header.jsp.

But sometimes, main.jsp loads SystemDetail.jsp into one of it's frames. In that case, I end up with two headers.

It's not a huge deal. But if it's possible, I'd like to clean it up a little and have only one header all the time.

Does that help explain my intent?

Thanks for the help!
- Stephanie

tgreer 189 Made Her Cry Team Colleague · 2006-05-23T03:28:51+00:00

It doesn't work because you are writing in a statement, on the client. That is not the same as evaluating a statement on the server.

Document.write(), then, is not the proper mechanism to use. In fact, in the more recent XHTML implementations, it isn't even supported.

You need to do all of this on the server, using the server-side language of your choice.

I guess we'd like to know what header.jsp actually does. If it writes out HTML/JavaScript, that JavaScript could indeed contain a conditional to test if the page is within a frame or not using "location" as a test as already explained.

sjklein 0 Newbie Poster · 2006-05-23T03:49:20+00:00

Okay, to make sure I understand what you're saying, I'm asking the server to evaluate something that is only on the client?

<side note> I have a hard time understanding the difference between server and client in this context. Do you (or anyone else) know of a good tutorial, article, etc. that will help lay it out for me? </side note>

As for what header.jsp does... It first calls a couple functions to load a couple of those fancy mouse-over, drop-down menu type things. Then it pre-loads a couple images. Finally, it sets up a table to display a couple of links.

I did try a couple of different ways to test if there was a frame or not, but none of them worked. It's possible - probable even - that I did it wrong, though. What type of conditional statement did you have in mind? Edited: Oops, just re-read your post. You're saying I should add if (top.location != location) to header.jsp? Where would I add it? In the <head> section? (Sorry if I seem really dense - I'm usually not, this is just a whole new type of development for me.)

If you need the actual file, I'd be more than happy to send/post it for you.

Thanks again for the help!
- Stephanie

Comatose 290 Taboo Programmer Team Colleague · 2006-05-23T04:42:49+00:00

Just out of curiosity, if document.write is depreciated, what method has taken it's place?

tgreer 189 Made Her Cry Team Colleague · 2006-05-23T07:01:47+00:00

DOM methods have replaced document.write(). You can create elements (nodes), set their attributes, and invoke their methods. You've seen some of this, for example: document.getElementById("x").innerText = "Howdy"; sjklein: just the opposite. You're asking the client to do something that should be done on the server.

The web is very simple: you have web server (the server), and you have browsers (the client).

Clients can request documents from the server. That request (called HTTP Request or just "Request" in web development jargon) can pass in parameters. There are two modes, GET, and POST. With GET Requests, the parameters are tacked onto the URL in what's known as the QueryString:

http://server_name/page.html?key=value

With a POST, the variables are passed in via an HTML Form.

The server generates a RESPONSE, which can be the document itself. The document comes back to the client, and at that time, any client-side code, such as a JavaScript, can be run by the browser.

The Web Server might be configured to perform additional tasks with certain types of documents. For example, a PHP document is passed to the PHP interpreter, which runs all the server-side code, generating the final HTML, which is given back to the web server and then eventually to the client.

So it's real simple: CLIENT = BROWSER = REQUEST, SERVER = WEB Server = RESPONSE.

In your case, doing a "document.write()" of an include line won't work, because it doesn't generate a Request.

Ok, so your "header.jsp" isn't really a jsp (Java Server Page), but simply contains JavaScript? Then name it "header.js".

Yes, you could wrap your entire script in an "if". When it runs (on the client), it will test if it's in a frame, or not, and run, or not, accordingly.

I think you'll have to post the script for more specific help.

Comatose 290 Taboo Programmer Team Colleague · 2006-05-23T07:16:08+00:00

*Nods*

Nice.

sjklein 0 Newbie Poster · 2006-05-23T17:07:14+00:00

Ok, so your "header.jsp" isn't really a jsp (Java Server Page), but simply contains JavaScript? Then name it "header.js".

What would make it a Java Server Page? (I didn't create or name the files, I've just inherited them.) If the page creates a response, that would make it a server page? So if the page has code that tailors a new page depending on different variables, is the new tailored page the response? If so, I think header.jsp is a Java Server Page. If not, where did my logic go wrong?

Okay, here is header.jsp. I apologize ahead of time for the functions. They are almost impossible to read. They work, though, and without a better understanding of JavaScript, I don't want to try to "fix" them.

<head>
<title>Tool Suite</title>
<script language="JavaScript">
<!--
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
// mmLoadMenus()
//-->
</script>
<script language="JavaScript1.2" src="../scripts/mm_menu.js"></script>
<script language="JavaScript1.2" src="../scripts/content_menu.js"></script>
</head>
<body onLoad="MM_preloadImages('../images/nav_r1_c1_f2.gif','../images/nav_r1_c2_f2.gif','../images/nav_r1_c3_f2.gif','../images/nav_r1_c4_f2.gif');">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="50%" align="left" class="headerbg"><img src="../images/header_left.jpg" width="435" height="100"></td>
<td width="50%" align="right" class="headerbg"><img src="../images/header_right.jpg" width="465" height="100"></td>
</tr>
</table>
<script language="JavaScript1.2">mmLoadMenus();</script>
<table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#556692">
<tr>
<td align="left" valign="top" class="menubg">
<table border="0" cellpadding="0" cellspacing="0" width="900">
<!-- fwtable fwsrc="nav.png" fwbase="nav.gif" fwstyle="Dreamweaver" fwdocid = "1115671916" fwnested="0" -->
<tr>
<td width="10%" align="left" class="menubg"><a href="#" onMouseOut="MM_swapImgRestore();MM_startTimeout()" onMouseOver="MM_showMenu(window.mm_menu_0117101638_0,93,20,null,'nav_r1_c1');MM_swapImage('nav_r1_c1','','../images/nav_r1_c1_f2.gif',1);"><img name="nav_r1_c1" src="../images/nav_r1_c1.gif" width="186" height="20" border="0" alt=""></a></td>
<td width="10%" align="left" class="menubg"><a href="#" onMouseOut="MM_swapImgRestore();MM_startTimeout()" onMouseOver="MM_showMenu(window.mm_menu_0117101845_1,74,20,null,'nav_r1_c2');MM_swapImage('nav_r1_c2','','../images/nav_r1_c2_f2.gif',1);"><img name="nav_r1_c2" src="../images/nav_r1_c2.gif" width="184" height="20" border="0" alt=""></a></td>
<td width="10%" align="left" class="menubg"><a href="#" onMouseOut="MM_swapImgRestore();MM_startTimeout()" onMouseOver="MM_showMenu(window.mm_menu_0118085502_2,43,20,null,'nav_r1_c3');MM_swapImage('nav_r1_c3','','../images/nav_r1_c3_f2.gif',1);"><img name="nav_r1_c3" src="../images/nav_r1_c3.gif" width="120" height="20" border="0" alt=""></a></td>
<td width="70%" align="left" class="menubg"><img src="../images/nav_r1_c5.gif" width="383" height="20" border="0" alt=""></td>
</tr>
</table>
</td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="right">
<table width="450" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="right">&nbsp;</td>
<td align="right"><a href="about.jsp"><img src="../images/about.gif" width="90" height="20" border="0"></a></td>
<td align="right"><a href="help.jsp"><img src="../images/help.gif" width="46" height="20" border="0"></a></td>
<td align="right"><a href="links.jsp"><img src="../images/links.gif" width="45" height="20" border="0"></a></td>
<td align="right"><a href="contacts.jsp"><img src="../images/contact.gif" width="56" height="20" border="0"></a></td>
<td align="right"><a href="admin.jsp"><img src="../images/admin.gif" width="88" height="20" border="0"></a></td>
<td align="right"><a href="LogoutServlet.do"><img src="../images/logout.gif" width="56" height="20" border="0"></a></td>
<td align="right"><a href="index.jsp"><img src="../images/home.gif" width="46" height="20" border="0"></a></td>
</tr>
</table></td>
</tr>
</table>

I'm going to put the if (top.location != location) at the top of header.jsp. I'm then going to make everything a println statement if the condition is false. Will that work? It's kind of early, so I might have the answer before you even read this... :)

Again, thank you, everyone, for the time you've spent helping me try to understand this. I really do apprecitate it.

- Stephanie

sjklein 0 Newbie Poster · 2006-05-23T18:45:59+00:00

Okay, so I've discovered my intended method won't work. I was trying what Comatose had suggested, but tgreer had already said won't work. But I understand why it won't work and what the intent was better than I did... So I guess it wasn't a complete waste of time.

So, here's what I've done:

<script language="javascript">
if (top.location == location)
{
</script>
 
All header.jsp file as posted above
 
<script language="javascript">
}
</script>

It gives me the intended look I was after, but the page loads with an error. I suspect it's because I've split the { and } into "different" script tags. Is that the reason? Is there a proper way to do this?

If not, how big of a deal is it for a page to load with an error? As long as the info is displayed as intended and the functionality is okay, does it matter that the page loads with an error?

Again, thanks so much!

- Stephanie

tgreer 189 Made Her Cry Team Colleague · 2006-05-23T21:49:10+00:00

That page you posted isn't written in the Java programming language, so it can't be a "Java Server Page", or JSP. It's simply JavaScript (not Java). So the file extension ".JSP" is incorrect, it should be named "header.js".

There is no such thing as a "server page" vs. a "client page". A page is a page. The client Requests a Page, the server sends the page as a Response. A Page (lets call it a "document" instead of a page)... so, a document might just be HTML, in which case it's served "as is" to the client, which renders it.

A document might include JavaScripts, which are served to the browser, and which then run on the client.

A document might be written in a language such as PHP, which needs to be interpreted. The web server will pass the document through a filter, in this case the PHP interpreter, to process the script and generate the Response, which takes the form of HTML/CSS/JavaScript, which is passed back to the client.

In your case, you're serving JavaScript. It runs on the client. It will run on every page. If we're loading the page in a frame, we want nothing to happen. That requires an IF statement.

Now, theoretically, you could edit your header.js page to look like this:

if (top.location == location)
{
 
All header.jsp file as posted above
 
}

However, that won't really work because your header.js page is not well-written. Ideally, everything should be done as functions/function calls, including the table for your menu. Then, each function could test whether the page was in frames, or not.

As is, your script (header.js) creates a partial HTML document. It has a <body> tag but no closing tag.... it's a mess. To really do what you want, you'll have to re-write your header file.

In fact: your header.jsp isn't really a "script". It's the top-half of a standard HTML file. The HTML file contains internal and external JavaScript, plus HTML. It's a mess, neither fish nor fowl.

But, that doesn't mean it won't work, depending on how you write it. I hate hacking bad code that just happens "to work", because it becomes a nightmare for whoever inherits this code later, as you're learning.

But, open the header.js file, and do this:

<head>
<title>Tool Suite</title>

if (top.location == location)

{
<script language="JavaScript">
<!--
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
// mmLoadMenus()
//-->
</script>
<script language="JavaScript1.2" src="../scripts/mm_menu.js"></script>
<script language="JavaScript1.2" src="../scripts/content_menu.js"></script>

}
</head>

if (top.location == location)
{
<body onLoad="MM_preloadImages('../images/nav_r1_c1_f2.gif','../images/nav_r1_c2_f2.gif','../images/nav_r1_c3_f2.gif','../images/nav_r1_c4_f2.gif');">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="50%" align="left" class="headerbg"><img src="../images/header_left.jpg" width="435" height="100"></td>
<td width="50%" align="right" class="headerbg"><img src="../images/header_right.jpg" width="465" height="100"></td>
</tr>
</table>
<script language="JavaScript1.2">mmLoadMenus();</script>
<table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#556692">
<tr>
<td align="left" valign="top" class="menubg">
<table border="0" cellpadding="0" cellspacing="0" width="900">
<!-- fwtable fwsrc="nav.png" fwbase="nav.gif" fwstyle="Dreamweaver" fwdocid = "1115671916" fwnested="0" -->
<tr>
<td width="10%" align="left" class="menubg"><a href="#" onMouseOut="MM_swapImgRestore();MM_startTimeout()" onMouseOver="MM_showMenu(window.mm_menu_0117101638_0,93,20,null,'nav_r1_c1');MM_swapImage('nav_r1_c1','','../images/nav_r1_c1_f2.gif',1);"><img name="nav_r1_c1" src="../images/nav_r1_c1.gif" width="186" height="20" border="0" alt=""></a></td>
<td width="10%" align="left" class="menubg"><a href="#" onMouseOut="MM_swapImgRestore();MM_startTimeout()" onMouseOver="MM_showMenu(window.mm_menu_0117101845_1,74,20,null,'nav_r1_c2');MM_swapImage('nav_r1_c2','','../images/nav_r1_c2_f2.gif',1);"><img name="nav_r1_c2" src="../images/nav_r1_c2.gif" width="184" height="20" border="0" alt=""></a></td>
<td width="10%" align="left" class="menubg"><a href="#" onMouseOut="MM_swapImgRestore();MM_startTimeout()" onMouseOver="MM_showMenu(window.mm_menu_0118085502_2,43,20,null,'nav_r1_c3');MM_swapImage('nav_r1_c3','','../images/nav_r1_c3_f2.gif',1);"><img name="nav_r1_c3" src="../images/nav_r1_c3.gif" width="120" height="20" border="0" alt=""></a></td>
<td width="70%" align="left" class="menubg"><img src="../images/nav_r1_c5.gif" width="383" height="20" border="0" alt=""></td>
</tr>
</table>
</td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="right">
<table width="450" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="right">&nbsp;</td>
<td align="right"><a href="about.jsp"><img src="../images/about.gif" width="90" height="20" border="0"></a></td>
<td align="right"><a href="help.jsp"><img src="../images/help.gif" width="46" height="20" border="0"></a></td>
<td align="right"><a href="links.jsp"><img src="../images/links.gif" width="45" height="20" border="0"></a></td>
<td align="right"><a href="contacts.jsp"><img src="../images/contact.gif" width="56" height="20" border="0"></a></td>
<td align="right"><a href="admin.jsp"><img src="../images/admin.gif" width="88" height="20" border="0"></a></td>
<td align="right"><a href="LogoutServlet.do"><img src="../images/logout.gif" width="56" height="20" border="0"></a></td>
<td align="right"><a href="index.jsp"><img src="../images/home.gif" width="46" height="20" border="0"></a></td>
</tr>
</table></td>
</tr>
</table>
}
else
{
<body>
}

That MIGHT work.

Comatose 290 Taboo Programmer Team Colleague · 2006-05-24T02:26:55+00:00

If I'm not mistaken though, adding the if to the header.js file won't stop it from being included, it will just not have anything in it right? It will still actually load the header.js, or am I way off?

tgreer 189 Made Her Cry Team Colleague · 2006-05-24T03:52:08+00:00

Yes, everyone of her pages somehow includes header. It will always run. But when it does, it does frame detection.

That's what I meant originally: you could only control whether nor not to include the file, server-side. And, server-side, as far as I know, you can't detect whether the request is coming from a framed page or not (I'll have to research that! Perhaps the user-agent reports something?)

But her file isn't really a script, it's an HTML fragment, so I'm unsure how to code this. Really, she needs a header script, included on every page, which does frame detection.