Member Avatar for fieryidris

i spent a lot of time yesterday redoing my whole website with iframes for each section but once
i put everything onto the server i found that the links inside the iframes opened inside the iframes rather than in the whole window. how do i escape from the iframe to open a link in the whole window or a new window?
i have just left an example iframe page at so the problem can be seen.

  • 8 Contributors
  • 8 Replies
  • 683 Views
  • 5 Years Discussion Span
  • Latest Post Latest Post by mianovag

Dani AI

Generated

Quick answer and context: the simplest fix (what and were pointing at) is to make links from inside the iframe open somewhere other than the iframe. For one-off links you can set their target; if you have many links, put a base tag in the framed document head to set a default target for all anchors. (developer.mozilla.org)

If you need to navigate the top window from script (for example links generated by JavaScript), and the framed page is same-origin with the top page, you can programmatically change the top location. Example (inside the iframe, same-origin case):

// same-origin iframe: navigate top
window.top.location.href = 'https://example.com/';

Be aware modern browsers and the iframe sandbox can block or require user activation for top-level navigation, and cross-origin frames have stricter rules. Check the iframe sandbox attributes (allow-top-navigation / allow-top-navigation-by-user-activation) and browser interventions. (developer.mozilla.org)

If the iframe content is cross-origin and you cannot rely on assigning top.location, use a handshake: the iframe posts a message to the parent, and the parent (which can change window.location) performs the navigation after validating origin. Example (iframe -> parent):

// iframe (sender)
window.parent.postMessage({type:'navigate', url:'https://example.com/'}, 'https://parent.example');

// parent (receiver)
window.addEventListener('message', e => {
  if (e.origin !== 'https://iframe.example') return;
  if (e.data?.type === 'navigate') window.location.href = e.data.url;
});

Always verify origin and data before acting. (developer.mozilla.org)

Troubleshooting notes: if your iframe border shows oddly, use CSS (frameborder is deprecated) and reset default margins on the framed document; e.g. set html, body { margin:0 } and iframe { display:block; border:1px solid #000 }. If you open a new tab/window use rel="noopener" to avoid opener attacks. Also consider that using iframes for full-site layout is fragile—server includes, AJAX fragments or SPA routing are safer long-term. (developer.mozilla.org)

Recommended Answers

All 8 Replies

Member Avatar for tgreer

Research the "target" attribute of hyperlinks.

Member Avatar for shephunts

Should be target="_top"

That's how I fixed my problem like this.

Member Avatar for fieryidris

thanks shephunts for target="_top".
i ate some bad fish on saturday and i was already deteriorating when the iframes not doing what i expected finished me off.
i have now done some proper research on the different target commands and checked what happens when you use them in an iframe.

all these links below and the results are within an iframe

<a href="http://www.google.co.uk" target="_blank"> will open google in a new window

<a href="http://www.google.co.uk" target="_parent"> will open google in all of the current window

<a href="http://www.google.co.uk" target="_self"> will open google inside the iframe

<a href="http://www.google.co.uk" target="_top"> will open google in all of the current window

<a href="http://www.google.co.uk"> with no target command will open google inside the iframe

separately from this problem i had of escaping from the iframe i have also been emailed some screenshots by my sister of how the iframe page is being displayed in different browsers and it's not looking very good.
the border of the iframe is only showing on the right hand side and the bottom - i'm not sure if this is because i have got a black background as it seemed to work ok for me in internet explorer and firefox before when the background was red.
in netscape 4.7 the iframe is not displayed at all and the top of the page is just followed by the bottom. i know netscape is now 8.0 so 4.7 is very out of date but is this going to affect any other browsers and destroy the page layout making the iframe a bad idea?

.

Member Avatar for Pritam1984

Thanks a lot. This thread helps me much.

Member Avatar for sourcez

Hadn't used IFRAMEs for a while and forgot about having to use _target. Really messed me up!

Useful reminder.

Member Avatar for sbv

Thanks. its useful to solve my problem also. :)
But instead of click on hyp link i need the same on Image click. Do you have any idea about it.?

Member Avatar for kiwisites

simple...
REPLACE:

<A href="link.htm">Hyper linked Text</a>

WITH

<a href="link.htm">
<IMG SRC="yourimage.jpg" border="0">
</a>
Member Avatar for mianovag

seem silly but i have done that before, but it didn't work, perhaps because i was making that call from a java scrip, have any body try that, make the same call from a javascript function?

commented: Kind of pointtless responding to a thread from 2008 -1
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.