opening external link in a frame

Forum Moderators: open

Message Too Old, No Replies

opening external link in a frame

hanyaz

10:22 am on Oct 20, 2008 (gmt 0)

Hello,
I want to know if there is a way to open external link in a new page containing a framset.
I have :
1- pageA.htm : contains an external link
2- pageB.htm : contains 2 frames header (frame1) and main(frame2)

I want to open the external link of pageA.htm in the main frame of pageB.htm
Thanks for any suggestion
Hanyaz

DrDoc

5:02 pm on Oct 20, 2008 (gmt 0)

I'm slightly confused, so bear with me.

Is there a top-level frameset that contains pageA and pageB?
Or, are you saying you have a single page, and wish to open pageB as normal, except loading the new page into frame2?
Do you have any PHP/Perl/ASP scripting experience?

Fotiman

5:46 pm on Oct 20, 2008 (gmt 0)

Something like this:
pageA.htm


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
 "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" > 
<title>Untitled</title> 
</head> 
<body> 
<a href="http://www.example.com">example</a> 
<script type="text/javascript"> 
window.onload = function () { 
  var elList = document.getElementsByTagName('a'); 
  var i; 
  for (i = 0; i < elList.length; i++) { 
    elList[i].href = "pageB.htm?s=" + encodeURI(elList[i].href); 
  } 
}; 
</script> 
</body> 
</html>

In that example, I created regular links and then used JavaScript to change them to support my framed page (since JavaScript is going to be required on my frameset page, I want to allow the links to work for those with JavaScript disabled). Alternatively, I could use a server side language like PHP or ASP (as DrDoc hinted at), which would be a better solution.

Next, your pageB.htm:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" 
 "http://www.w3.org/TR/html4/frameset.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" > 
<title>Untitled</title> 
<script type="text/javascript"> 
window.onload = function () { 
  var url = location.search; 
  var i, main = document.getElementById('main'); 
  url = url.replace('?',''); // Strip leading ? 
  url = url.split('&'); // Parse each key/value pair 
  // [s=..., x=..., y=...] 
  for (i = 0; i < url.length; i++) { 
    url[i] = url[i].split('='); // Split keys and values 
    url[url[i][0]] = url[i][1]; // Assign the value as a property of url 
  } 
  main.src = url['s']; 
}; 
</script> 
</head> 
<frameset rows="25%, 75%">   
  <frame id="header"> 
  <frame id="main"> 
</frameset> 
</html>

My parsing of the URL was a little quick and dirty... you might want to perform more validation checks.

hanyaz

9:26 am on Oct 21, 2008 (gmt 0)

Thanks Fotiman,
I just copied and pasted the code above in both pages, but when i click on example on pageA.htm i got the pageB.htm with blank frames.

Fotiman

1:44 pm on Oct 21, 2008 (gmt 0)

When you click on the link, does the URL for pageB.htm include:
?s=http://www.example.com

hanyaz

3:49 pm on Oct 21, 2008 (gmt 0)

this is what i got :
pageB.htm?s=http://www.example.com/

Fotiman

5:57 pm on Oct 21, 2008 (gmt 0)

Hmmm. Well, then, I'm stumped. That example works perfectly on my end. Maybe try throwing some alert statements in there to verify that it's doing what it's supposed to:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"  
 "http://www.w3.org/TR/html4/frameset.dtd">  
<html>  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" >  
<title>Untitled</title>  
<script type="text/javascript">  
window.onload = function () {  
  var url = location.search;  
  var i, main = document.getElementById('main');  
  url = url.replace('?',''); // Strip leading ?  
  url = url.split('&'); // Parse each key/value pair  
  // [s=..., x=..., y=...]  
  for (i = 0; i < url.length; i++) {  
    url[i] = url[i].split('='); // Split keys and values  
    url[url[i][0]] = url[i][1]; // Assign the value as a property of url  
  }  
  alert('Setting the main.src value to:\n' + url['s']); 
  main.src = url['s'];  
  alert('Done'); 
};  
</script>  
</head>  
<frameset rows="25%, 75%">   
  <frame id="header">  
  <frame id="main">  
</frameset>  
</html>