Load full page by clicking link within Iframe

Asked

Viewed 8,677 times

0

Hello,

I have an Iframe as follows:

<iframe width="230" height="280" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://impressoearte.com/produto-em-destaque/" target="_top" ></iframe>

What I want to do:

This iframe calls the product a specific page within a part of the main site, the specific page is this: http://impressoearte.com/produto-em-destaque/

This product contains a link in the image to view more details of this product. I need that when clicking on this product image the main page is loaded to the product page and not only the block where the iframe is. I need a solution that does not need to know the link that will be in the product image, IE, regardless of the product image link the upload is done.

Can someone help me?

html iframe

2 answers

2


If you have access to the code HTML of the page in question, the solution is quite simple. Simply add an attribute target on the link with value _blank that in this case you open the link on another page:

<a href="http://impressoearte.com/produto-em-destaque/" target="_blank">
    <img src="http://impressoearte.com/wp-content/uploads/2016/06/exaustor-510x510.jpg"/>
</a>

But if you want to open it anyway, just use the value _parent:

<a href="http://impressoearte.com/produto-em-destaque/" target="_parent">
   <img src="http://impressoearte.com/wp-content/uploads/2016/06/exaustor-510x510.jpg"/>
</a>

You can still try with javascript:

<a href="http://impressoearte.com/produto-em-destaque/" onclick="return irParaPaginaAcima(this.href)">
   <img src="http://impressoearte.com/wp-content/uploads/2016/06/exaustor-510x510.jpg"/>
</a>

<script type="text/javascript">
    var irParaPaginaAcima = function irParaPaginaAcima (link) {
        window.parent.location = link;
        return false;
    }
</script>

In newer browsers, none of this will work if you don’t allow it. To do this you need to set the attribute sandbox in the iframe with the amount corresponding to what you want to release.

<!-- Para habilitar a navegação por target="_parent" -->
<iframe sandbox="allow-top-navigation" ... />


<!-- Para habilitar a navegação por javascript (window.location = url) -->
<iframe sandbox="allow-scripts" ... />

I hope I helped the/

  • If I put a target I will just open the link in a new tab, this is not what I want. I need to have it loaded on the same page where the iframe is, but not only inside the block (div) of the iframe, but on the whole page.

  • You want to open the link on the same page, that’s it?

  • that’s right. I need to have it loaded on the same page where the iframe is, but not only inside the block (div) of the iframe, but on the whole page.

  • Well, in that case you can use the value _parent. I edited the answer.

  • I understood, I tried to use the value _Parent inside the iframe code, but it didn’t work. As for editing the page that iframe calls I won’t have access to it.

  • There seems to be some security setting that does not allow a child page (iframe) interfere with the mother’s behaviour

  • And there’s a way around it?

  • as I had said from the beginning, I will not have access to edit the child page (iframe src). So there is no way I can enter your javascript. The product comes from Woocommerce.

  • I got a solution, I’m editing the answer.

  • Thank you for your help, unfortunately I still cannot vote on your reply.

Show 5 more comments

0

You can create a CSS and in the example class:

<head>
  <style>
    .framepdf {
      width: 100%;
      height: 100%;
    }
  </style>
</head>

<iframe class="framePdf" src="http://impressoearte.com/produto-em-destaque/"> </iframe>

Browser other questions tagged html iframe

You are not signed in. Login or sign up in order to post.