R – SVG iframe embed and clickable links: how to target the _top

iframesvg

I need to display a svg image (on which I have no control on) on a page I have control on.
This svg image has links, but when I click on them, the page is opened in the iframe. A solution would be to write target="_top" in the svg link, but I have no control on that file.

Is there a way to have the links open in the parent page (as it was a clickable image map)?

Best Answer

If the svg file is hosted on the same domain you can reach into it with script to do the target="_top" modification.

Something like this:

var link_elms = youriframe.contentDocument.querySelectorAll("a");
for(var i=0;i<link_elms.length;i++)
{
  link_elms[i].setAttribute("target", "_top");
}

The other option is to make a copy of the svg file so that you gain full control over it.

Related Solutions

Html – How to apply CSS to iframe

Edit: This does not work cross domain unless the appropriate CORS header is set.

There are two different things here: the style of the iframe block and the style of the page embedded in the iframe. You can set the style of the iframe block the usual way:

<iframe name="iframe1" id="iframe1" src="empty.htm" 
        frameborder="0" border="0" cellspacing="0"
        style="border-style: none;width: 100%; height: 120px;"></iframe>

The style of the page embedded in the iframe must be either set by including it in the child page:

<link type="text/css" rel="Stylesheet" href="Style/simple.css" />

Or it can be loaded from the parent page with Javascript:

var cssLink = document.createElement("link");
cssLink.href = "style.css"; 
cssLink.rel = "stylesheet"; 
cssLink.type = "text/css"; 
frames['iframe1'].document.head.appendChild(cssLink);

R – IE6 _top links inside iframe between domains

I don't have ie6 installed in my machine, but I think you can try a little trick in iframe, setting an onclick attribute in your anchor tag with window.top.location.href='http://www.google.com';. Does it work?

Best Answer

Related Solutions

Html – How to apply CSS to iframe

R – IE6 _top links inside iframe between domains

Related Topic