www.webdeveloper.com
Results 1 to 8 of 8

Thread: Open link outside iFrame.

  1. #1
    Join Date
    Jun 2009
    Posts
    6

    Open link outside iFrame.

    OK, I obviously like to do things the hard way because I have searched the net for a soution for the last 2 days and no luck. I am new to Javascript so maybe I am not using the correct terminology.

    I have a test website at www.prrr.org/newsite I have managed to get the menu to open files in the iFrame and also external website links to open in a new page using the following code.
    Code:
    this.blankwin = function(){
    	var hostname = window.location.hostname;
    	hostname = hostname.replace("www.","").toLowerCase();
    	var a = document.getElementsByTagName("a");	
    	this.check = function(obj){
    		var href = obj.href.toLowerCase();
    		return (href.indexOf("http://")!=-1 && href.indexOf(hostname)==-1) ? true : false;				
    	};
    	this.set = function(obj){
    		obj.target = "_blank";
    		obj.className = "external";
    	};	
    	for (var i=0;i<a.length;i++){
    		if(check(a[i])) set(a[i]);
    	};		
    };
    
    
    
    // script initiates on page load. 
    
    this.addEvent = function(obj,type,fn){
    	if(obj.attachEvent){
    		obj['e'+type+fn] = fn;
    		obj[type+fn] = function(){obj['e'+type+fn](window.event );}
    		obj.attachEvent('on'+type, obj[type+fn]);
    	} else {
    		obj.addEventListener(type,fn,false);
    	};
    };
    addEvent(window,"load",blankwin);
    Code:
    // JavaScript Document
    
    window.onload = initiFrame;
    
    function initiFrame() {
    	for(var i=0; i<document.links.length; i++) {
    		document.links[i].target = "content";
    		document.links[i].onclick = setiFrame;
    	}
    }
    
    function setiFrame() {
    	document.getElementByID("content").contentWindow.document.location.href = this.href;
    	return fales;
    }
    But here is the problem. I have a link just under the menu to a forum. I need that link to open in a seperate window NOT in the iFrame. I know the code I am using forces all liunks into the Iframe but this needs to be a seperate page.

    Any suggestions?

    Thanks

    Quentin

  2. #2
    Join Date
    Aug 2005
    Location
    Northampton, UK.
    Posts
    421
    Hey, i'm assuming the link to the prrr forum is this:

    Code:
    <a href="http://www.prrr.org/forum/index.php" onclick="window.open(this.href,'newwin'); return false;">PRRR Forum - For general discussion and questions on everything Rat Related. Come and join the fun</a>
    ??

    If it is then what you need to do is, take out the onclick event and change the target to "_blank" like so:
    Code:
    <a href="http://www.prrr.org/forum/index.php" target="_blank">PRRR Forum - For general discussion and questions on everything Rat Related. Come and join the fun</a>
    That will open the link in a new window/tab(depending on the user's browser and settings).

    Cheers,
    Jamey

  3. #3
    Join Date
    Jun 2009
    Posts
    6
    Sorry, yes that is the correct link.
    I tried the _blank and had that previously but it still opens the link in the iframe.
    If I put the link inside the iframe it opens in a new windows but because the link is outside the iframe it keeps referencing the iframe.

  4. #4
    Join Date
    Aug 2005
    Location
    Northampton, UK.
    Posts
    421
    Sorry, that's my fault, i only skimmed the page before.

    The problem is in frames.js:
    Code:
    // JavaScript Document
    
    window.onload = initiFrame;
    
    function initiFrame() {
    	for(var i=0; i<document.links.length; i++) {
    		document.links[i].target = "content";
    		document.links[i].onclick = setiFrame;
    	}
    }
    
    function setiFrame() {
    	document.getElementByID("content").contentWindow.document.location.href = this.href;
    	return fales;
    }
    This code sets ALL links in the page to open in the iFrame.

    You could change it to:
    Code:
    // JavaScript Document
    
    window.onload = initiFrame;
    
    function initiFrame() {
    	for(var i=0; i<document.links.length; i++) {
    	if(document.links[i].target != "_blank"){
    		document.links[i].target = "content";
    		}
    		document.links[i].onclick = setiFrame;
    	}
    }
    
    function setiFrame() {
    	document.getElementByID("content").contentWindow.document.location.href = this.href;
    //note the correction of a typo below
    	return false;
    }
    Or just rid of the script and change the target manually(which is the correct way to do it)...

    Cheers,
    Jamey

  5. #5
    Join Date
    Jun 2009
    Posts
    6
    Ok, the reason I use frames.js is so that my Tigra menu items open in the iFrame.
    Is there another way to open the Tigra menu items within the iframe and therefore allow me to remove frames.js?

    Thanks for your help.

  6. #6
    Join Date
    Aug 2005
    Location
    Northampton, UK.
    Posts
    421
    Then we're working on a catch 22 here. You can either take time to work out the many things wrong with the menu, or modify the frames script and go a different way with the menu. But the origional problem is that your site is very hashed together from so many different scripts. Personally i think you need to simplify, because if anyone came to your site with JS disabled(a lot of users do) then your site's useless to them.

    The amount your scripts jump about i'm struggling to find a final answer for this, because it would just be another work around.

  7. #7
    Join Date
    Jun 2009
    Posts
    6
    Thanks for the info. I have redefined the menu to work correctly and target the correct iFrame. I have removed the 2 scripts for linking and targeting.

    I understand what you mean about Javascript disabled but I thought Javascript was the way to go?

    I have included a basic link menu at the bottom of the page (still needs some work) but I think it will suffice for those with javascript disabled.

    Thansk for your input and understanding with a newbie, appreciate it.

  8. #8
    Join Date
    Aug 2005
    Location
    Northampton, UK.
    Posts
    421
    When pop-up menus are involved javascript is the best way to go, but you're best to never actually create the menu with javascript, but open/close(hide/show) the menu, so that if javascript is disabled the menu is still seen by the user e.g:

    Code:
    <script type="text/javascript">
    
    function showMenu(){
      var menu = document.getElementById("dropdownmenu");
      menu.style.display="block";
    }
    
    function hideMenu(){
      var menu = document.getElementById("dropdownmenu");
      menu.style.display="none";
    }
    
    window.onload=hideMenu;
    
    </script>
    .....
    <ul id="dropdownmenu">
    <li>Menu Item 1</li>
    <li>Menu Item 2</li>
    <li>Menu Item 3</li>
    </ul>
    With various show/hide handlers on other objects in the page of course. But that's the best way to go about it because if the user doesn't have JS enabled they aren't going to lose the functionality of your site (because hideMenu() wont run).

    Cheers,
    Jamey

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles