Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Shaun E on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

frame targeting problem 1

Status
Not open for further replies.
retrositelover

retrositelover

Programmer
Oct 20, 2004
35
Hi,

I have a problem with a script I wanted to modify - might be interesting for others, so I post it here:

The original script is from - I wanted to use it in order to target to 5 frames (I called them 'surfareas', but they are Iframes), or (in another version of my homepage) to let Firefox open windows that work like frames. Every content page would have built in the new script, so that the visitors e.g. could decide in which instance they would like to open links from the current page (very comfortable if you have many links, and much more flexible than with conventional frames).

Actually, I'm not a good Javascript-coder, as you'll see when looking at my attempt to make the script work: -

there are 3 problems I can't solve:
- the script only works with new windows, but not with frames that are already open (very bad)
- I would like to be able to check 2 boxes, so that 2 frames would be targeted at the same time (or:)
- I would like to use radio buttons. for each radio button having another name, it seems not to be possible to limit the user's choice to only one checked radio button.

thanks in advance for any tip - all the best
Joerg
 
Sort by date Sort by votes
First off - the script in question specifies it is for opening links in a new window. Each link is additionally set to open in the same place - the new unnamed window. Im sure there are members here who could better explain than I ever could how to adjust this.

Let them hate - so long as they fear... Lucius Accius
 
Upvote 0 Downvote
Try out this page:

Code: 
<html>
<head>
<title>Frames</title>

<script type="text/javascript">
<!-- hide

var currtarget = "_self";

function changeTarget(target)
{
  var currtarget = target;
  var links = document.getElementsByTagName("a");
  for (var i=0;i<links.length;i++)
  {
    links[i].setAttribute("target",currtarget);
  }
}

// end hide-->
</script>
</head>
<body onload="changeTarget('_self');">
<h3>Target</h3>
<form name="radios">
<input type="radio" name="target" value="_self" onclick="changeTarget(this.value);" selected="selected" />This window<br />
<input type="radio" name="target" value="_blank" onclick="changeTarget(this.value);" />New window<br />
<input type="radio" name="target" value="sub1" onclick="changeTarget(this.value);" />Sub win 1<br />
<input type="radio" name="target" value="sub2" onclick="changeTarget(this.value);" />Sub win 2<br />
<input type="radio" name="target" value="sub3" onclick="changeTarget(this.value);" />Sub win 3<br />
</form>
<a href="[URL unfurl="true"]http://www.google.com">Google</a><br[/URL] />
<a href="[URL unfurl="true"]http://www.yahoo.com">Yahoo</a><br[/URL] />
<br /><br />
<iframe name="sub1" id="sub1" src="about:blank" />
<iframe name="sub2" id="sub2" src="about:blank" />
<iframe name="sub3" id="sub3" src="about:blank" />
</body>
</html>

--Chessbot

"So it goes."
Kurt Vonnegut, Slaughterhouse Five
 
Upvote 0 Downvote
Code: 
<iframe name="sub1" id="sub1" src="about:blank" />
<iframe name="sub2" id="sub2" src="about:blank" />
<iframe name="sub3" id="sub3" src="about:blank" />

should be

Code: 
<iframe name="sub1" id="sub1" src="about:blank"></iframe>
<iframe name="sub2" id="sub2" src="about:blank"></iframe>
<iframe name="sub3" id="sub3" src="about:blank"></iframe>

--Chessbot

"So it goes."
Kurt Vonnegut, Slaughterhouse Five
 
Upvote 0 Downvote
great script - chessbot, thank you very much :)

(just built it into my homepage - if you want to see:
there's just one little problem left I can't deal with - some tables (YaBB-Board, e.g. the board & message index) have a script in the <td>-tag (so that users can click anywhere inside the cell in order to get to the linked page):
Code: 
onClick="document.location = 'file.html'"
- in this case the link loads in the current window. - I guess it's a beginner-question, but I don't have a chance to solve this..........
 
Upvote 0 Downvote
If you want to load it in the parent window, use "parent.document.location = 'file.html';"
Am I understanding you question correctly?

--Chessbot

"So it goes."
Kurt Vonnegut, Slaughterhouse Five
 
Upvote 0 Downvote
yes - I wanted that the file would load in the parent window which the user has chosen as frame target by clicking the radio button before
 
Upvote 0 Downvote
The radio buttons don't affect anything inside the frames; they only change the immediate page.

You can put the radio buttons on top of each page. A new radio button (for parent targeting):
Code: 
<input type="radio" name="target" value="_top" onclick="changeTarget(this.value);" />Outside of frames<br />

--Chessbot

"So it goes."
Kurt Vonnegut, Slaughterhouse Five
 
Upvote 0 Downvote
just wrote an html-file to demonstrate what I mean:

http://web337.server8.webplus24.de/public/example.html

e.g. you click on radio button '02' - after this, choose a link in the right column of the table. a new window will open up, which will be this 'frame' from now on (called 'surfarea2' in page source).

if you try the same with clicking in the cell space beneath a link in the left column (crosshair cursor), you'll see that Firefox will only open the link in the current browser window, and won't target the second window. -

perhaps, there could be a way to prevent this, so that even the onclick-event would lead to the second window
 
Upvote 0 Downvote
Code: 
<html><head><title></title>

<script type="text/javascript">
<!-- hide
//code by chessbot from tek-tips javascript forum ([URL unfurl="true"]http://www.tek-tips.com/userinfo.cfm?member=chessbot)[/URL]
var currtarget = "_self";

function changeTarget(target)
{
var currtarget = target;
var links = document.getElementsByTagName("a");
for (var i=0;i<links.length;i++)
{
links[i].setAttribute("target",currtarget);
}
}
// -->
</script>

</head><body onload="changeTarget('_self');">

<div align="right">
<form name="radios">open links in window: 
<input type="radio" name="target" value="_self" onclick="changeTarget(this.value);" selected="selected" /> current 
<input type="radio" name="target" value="_blank" onclick="changeTarget(this.value);" /> external  
<input type="radio" name="target" value="surfarea1" onclick="changeTarget(this.value);" /> 01 
<input type="radio" name="target" value="surfarea2" onclick="changeTarget(this.value);" /> 02 
<input type="radio" name="target" value="surfarea3" onclick="changeTarget(this.value);" /> 03 &nbsp;
</form>
</div><br>


<table border="1">
<tr>
<td width="200" background-color="gray" onMouseOver="this.style.backgroundColor='orange';" onMouseOut="this.style.backgroundColor='';" style="cursor:crosshair;" onClick="document.location = '[URL unfurl="true"]http://google.com'"><a[/URL] href="[URL unfurl="true"]http://google.com">Link[/URL] to Google</a>
</td>
<td background-color="gray"><a href="[URL unfurl="true"]http://google.com">normal[/URL] Link to Google</a>
</td>
</tr>
<tr>
<td width="200" background-color="gray" onMouseOver="this.style.backgroundColor='orange';" onMouseOut="this.style.backgroundColor='';" style="cursor:crosshair;" onClick="document.location = '[URL unfurl="true"]http://google.com'"><a[/URL] href="[URL unfurl="true"]http://altavista.com">Link[/URL] to Altavista</a>
</td>
<td background-color="gray"><a href="[URL unfurl="true"]http://altavista.com">normal[/URL] Link to Altavista</a>
</td>
</tr>
</table>

</body></html>
 
Upvote 0 Downvote
Here you go:

Code: 
function clickURL( url )
{
  if (currtarget == "_self")
  {
    document.location = url;
  }
  else if (currtarget = "_top")
  {
    parent.document.location = url;
  }
  else
  {
    window.open(url,currtarget);
  }
}

Call this function in the onClick of the td:
Code: 
<td onClick="clickURL('[URL unfurl="true"]http://google.com');"></td>[/URL]

This may not work for frames. Tell me if it does not.

--Chessbot

"So it goes."
Kurt Vonnegut, Slaughterhouse Five
 
Upvote 0 Downvote
thank you :)

don't know why, but the browsers still load the link in the current window instead opening/targeting the chosen one. perhaps a mistake on my side? - here's the example page code, perhaps you can find an error in there:

Code: 
<html><head><title></title>

<script type="text/javascript">
	<!-- hide
	//code by chessbot from tek-tips javascript forum ([URL unfurl="true"]http://www.tek-tips.com/userinfo.cfm?member=chessbot)[/URL]
	var currtarget = "_self";
	
	function changeTarget(target)
	{
	  var currtarget = target;
	  var links = document.getElementsByTagName("a");
	  for (var i=0;i<links.length;i++)
	  {
	    links[i].setAttribute("target",currtarget);
	  }
	}
	
	function clickURL( url )
	{
	  if (currtarget == "_self")
	  {
	    document.location = url;
	  }
	  else if (currtarget = "_top")
	  {
	    parent.document.location = url;
	  }
	  else
	  {
	    window.open(url,currtarget);
	  }
	}
	// -->
</script>

</head><body onload="changeTarget('_self');">

<div align="right">
	<form name="radios">open links in window: 
		<input type="radio" name="target" value="_self" onclick="changeTarget(this.value);" selected="selected" /> current 
		<input type="radio" name="target" value="_blank" onclick="changeTarget(this.value);" /> external  
		<input type="radio" name="target" value="surfarea1" onclick="changeTarget(this.value);" /> 01 
		<input type="radio" name="target" value="surfarea2" onclick="changeTarget(this.value);" /> 02 
		<input type="radio" name="target" value="surfarea3" onclick="changeTarget(this.value);" /> 03 &nbsp;
	</form>
</div><br>


<table border="1">
	<tr>
		<td width="200" background-color="gray" onMouseOver="this.style.backgroundColor='orange';" onMouseOut="this.style.backgroundColor='';" style="cursor:crosshair;" onClick="clickURL('[URL unfurl="true"]http://google.com');"><a[/URL] href="[URL unfurl="true"]http://google.com">Link[/URL] to Google</a>
		</td>
		<td background-color="gray"><a href="[URL unfurl="true"]http://google.com">normal[/URL] Link to Google</a>
		</td>
	</tr>
	<tr>
		<td width="200" background-color="gray" onMouseOver="this.style.backgroundColor='orange';" onMouseOut="this.style.backgroundColor='';" style="cursor:crosshair;" onClick="clickURL('[URL unfurl="true"]http://google.com');"><a[/URL] href="[URL unfurl="true"]http://altavista.com">Link[/URL] to Altavista</a>
		</td>
		<td background-color="gray"><a href="[URL unfurl="true"]http://altavista.com">normal[/URL] Link to Altavista</a>
		</td>
	</tr>
</table>

</body></html>
 
Upvote 0 Downvote
If you already are using the onClick="clickURL(' in the td, you don't need the a tag around the text; in fact, that is probably the problem.

You don't need to give me credit.

--Chessbot

"So it goes."
Kurt Vonnegut, Slaughterhouse Five
 
Upvote 0 Downvote
result is the same when stripping the hyperlink and just keeping the ckickURL - might be a browser-problem, I guess

do you want me to delete the credit line? I gave credit cause your posting was a great help for my site :)
 
Upvote 0 Downvote
Sorry, my error.

clickURL should be:

Code: 
    function clickURL( url )
    {
      if (currtarget == "_self")
      {
        document.location = url;
      }
      else if (currtarget [red]==[/red] "_top")
      {
        parent.document.location = url;
      }
      else [red]if (currtarget == "_blank")
      {
        window.open(url,"");
      }
      else
      {
	document.getElementById(currtarget).location = url;
      }[/red]
    }

and in changeTarget,
Code: 
      [red]var[/red] currtarget = target;
becomes]
Code: 
       currtarget = target;

--Chessbot

"See the TURTLE of enormous girth!"
-- Stephen King, The Dark Tower series
 
Upvote 0 Downvote
thank you. tried it, Firefox won't still work, IE gives this error (line33/char6/code0):

Code: 
'document.getElementById(...)' is null or not an object

I don't know what the reason is, and I don't expect you to solve it, perhaps it's impossible. but if you like, here's the page source:

Code: 
<html><head><title></title>

<script type="text/javascript">
	<!-- hide
	var currtarget = "_self";
	
	function changeTarget(target)
	{
	  currtarget = target;
	  var links = document.getElementsByTagName("a");
	  for (var i=0;i<links.length;i++)
	  {
	    links[i].setAttribute("target",currtarget);
	  }
	}
	
	function clickURL( url )
	{
	      if (currtarget == "_self")
	      {
		document.location = url;
	      }
	      else if (currtarget == "_top")
	      {
		parent.document.location = url;
	      }
	      else if (currtarget == "_blank")
	      {
		window.open(url,"");
	      }
	      else
	      {
	    document.getElementById(currtarget).location = url;
	      }
	}
	// -->
</script>

</head><body onload="changeTarget('_self');">

<div align="right">
	<form name="radios">open links in window: 
		<input type="radio" name="target" value="_self" onclick="changeTarget(this.value);" selected="selected" /> current 
		<input type="radio" name="target" value="_blank" onclick="changeTarget(this.value);" /> external  
		<input type="radio" name="target" value="surfarea1" onclick="changeTarget(this.value);" /> 01 
		<input type="radio" name="target" value="surfarea2" onclick="changeTarget(this.value);" /> 02 
		<input type="radio" name="target" value="surfarea3" onclick="changeTarget(this.value);" /> 03 &nbsp;
	</form>
</div><br>


<table border="1">
	<tr>
		<td width="200" background-color="gray" onMouseOver="this.style.backgroundColor='orange';" onMouseOut="this.style.backgroundColor='';" style="cursor:crosshair;" onClick="clickURL('[URL unfurl="true"]http://google.com');"><a[/URL] href="[URL unfurl="true"]http://google.com">Link[/URL] to Google</a>
		</td>
		<td background-color="gray"><a href="[URL unfurl="true"]http://google.com">normal[/URL] Link to Google</a>
		</td>
	</tr>
	<tr>
		<td width="200" background-color="gray" onMouseOver="this.style.backgroundColor='orange';" onMouseOut="this.style.backgroundColor='';" style="cursor:crosshair;" onClick="clickURL('[URL unfurl="true"]http://google.com');"><a[/URL] href="[URL unfurl="true"]http://altavista.com">Link[/URL] to Altavista</a>
		</td>
		<td background-color="gray"><a href="[URL unfurl="true"]http://altavista.com">normal[/URL] Link to Altavista</a>
		</td>
	</tr>
</table>


</body></html>
 
Upvote 0 Downvote
The reason for the getElementById() error is because you don't have the iframes on the page! Put
Code: 
<iframe id="surfarea1" name="surfarea1"></iframe> 
<iframe id="surfarea2" name="surfarea2"></iframe>
<iframe id="surfarea3" name="surfarea3"></iframe>
on your page and you shouldn't have the problem.

--Chessbot

"See the TURTLE of enormous girth!"
-- Stephen King, The Dark Tower series
 
Upvote 0 Downvote
thanks, you're right. is there any chance to bypass the error and have windows targeted/opened instead of the missing frames when I'm running this page without iframes?

(on my homepage, users have 2 versions for frame targeting: one with Iframes, and a second one for just having one window like this single page, opening other browser windows which will then work and be targetable like frames)
 
Upvote 0 Downvote
Just remove the radio buttons for the frames in the frameless page.

--Chessbot

"See the TURTLE of enormous girth!"
-- Stephen King, The Dark Tower series
 
Upvote 0 Downvote
ok, I see now. is there any possibility to have the radio buttons in every file, and prevent the error? I really like the cute idea of having several 'areas' each able to target all the other ones (only if you like)...... :)
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

amrmnabil
  • Locked
  • Question
React Problem
Replies
0
Views
338
amrmnabil
amrmnabil
bs6600
  • Locked
  • Question
Nested accordion problem
Replies
1
Views
300
bs6600
bs6600
Disskyz
  • Locked
  • Question
New to JavaScript, Having a problem with an array
Replies
2
Views
385
Disskyz
Disskyz
bs6600
  • Locked
  • Question
Accordion - Anchors in panels causing problems 1
Replies
6
Views
491
feherke
feherke
Michael Davis
  • Locked
  • Question
Robert.Husted Calendar Script Problem?
Replies
2
Views
342
Michael Davis
Michael Davis

Part and Inventory Search

Sponsor

Back
Top