to link a page within iframe and directed to a page without iframe

Question

generally if we click on a link within a iframe window, the directed new page will be viewed within the iframe window. Can i have a way to have the new page displayed as such without being in the iframe window.

Thanks in Advance, Samuel Mathews.

Answer 1

You might know about the TARGET attribute for links. With it, you can load a linked page not in the current, but in a different named (I)FRAME / window.

There are also some special target names which might help you:

• _parent: Opens the page in the frame containing the current (I)FRAME
• _top: Opens a page in the current browser window as the top frame

There are also other special targets, but they are not important in this case. See: http://www.w3schools.com/tags/att_a_target.asp

Answer 2

With jQuery you can easily get any element from iframe, attach an event callback for example when clicked and act accordingly e.g. view a page anywher you require.

example,

http://jsfiddle.net/Lmx9X/show/

see the code here,

http://jsfiddle.net/Lmx9X/

js

    $(document).ready(function(){
/*define a callback function to all anchors of iframe*/
        $('#subpage').contents().find('a').on('click',function(e){
/*prevent the default behaviour of navigating to the href of the anchors*/
            e.preventDefault();
/*do whatever you require, here for example a dialog is presented and navigates the parent page to the href url*/
            if (confirm('Prevented iframe from navigating to page. Do you want outer page to navigate instead??')) {
                var url = $(this).attr("href");
                window.location.href = (url.indexOf("#")==0?window.location.href:"")+$(this).attr("href");
            }else{
                alert("ok, will not navigate!");
            }
        });
    });

html

<iframe id="subpage" src="http://jsfiddle.net/s22Jm/1/show"></iframe>