0

não estou conseguindo achar uma solução que desabilite os links dentro de um IFRAME.

Já vi na web a opção de usar um ponter-events: none; dentro do CSS. Isso funciona, mas acaba fazendo com que o scroll da página que eu usei no iframe acabe sendo bloqueado.

Também vi que tem a opção de usar o atributo SANDBOX no IFRAME, mas notem que no meu código esse atributo está lá, mas mesmo assim não consigo a resposta.

Agradeço o apoio de vocês, vou colocar o código abaixo.

<!DOCTYPE html> 
<html> 
<head> 
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <title>Exemplo</title> 
    <style type="text/css"> 
        .rem-links { 
            <!-- pointer-events: none; bloqueia o scroll da página --> 
            cursor: default; 
            text-decoration: none; 
            color: black; 
        } 
         #externo { 
            display: none;
            margin: auto;
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            z-index: 1;
            height: 80vh;
            width: 70%;
            border: 1px solid black;
            background-color: lightblue;
            padding-top: 30px;
            padding-right: 20px;
            padding-bottom: 20px;
            padding-left: 20px;
            }
        #externo { 
}           
    </style> 
        <script type="text/javascript">
        $(document).ready(function () {
            
            $("#carregar_site").click(function(){
                $("#externo").toggle();
                });
        });
        </script>
</head> 
<body> 
    <div id="externo" class="modal"><button id="carregar_site">Fechar</button>
    <iframe sandbox class"rem-links" id="conteudo" src="" name="iframe_modal" width="100%" height="100%" frameborder="0" scrolling="yes" allowtransparency="true" title="Site externo"></iframe> 
    </div> 
    <div id="principal">
    <a href="https://getbootstrap.com/" target="iframe_modal" onclick="document.getElementById('externo').style.display='block'">bing</a>
    <!--! abaixo tem um lorem ipsum da vida -->
    <h1>Didn't melt fairer keepsakes since Fellowship elsewhere.</h1>
<p>Woodlands payment Osgiliath tightening. Barad-dur follow belly comforts tender tough bell? Many that live deserve death. Some that die deserve life. Outwitted teatime grasp defeated before stones reflection corset seen animals Saruman's call?</p>
<h2>Tad survive ensnare joy mistake courtesy Bagshot Row.</h2>
<p>Ligulas step drops both? You shall not pass! Tender respectable success Valar impressive unfriendly bloom scraped? Branch hey-diddle-diddle pony trouble'll sleeping during jump Narsil.</p>
<h3>North valor overflowing sort Iáve mister kingly money?</h3>
<p>Curse you and all the halflings! Deserted anytime Lake-town burned caves balls. Smoked lthilien forbids Thrain?</p>
<ul>
  <li>Adamant.</li>
  <li>Southfarthing!</li>
  <li>Witch-king.</li>
  <li>Precious.</li>
  <li>Gaffer's!</li>
</ul>
<!-- Fim do lorem ipsum -->
    </div>
</body> 
</html> 

1 Resposta 1

0

Fernando não sei se é bem isso que precisa, mais se tiver acesso a url externa que está usando pode manipular o conteudo do frame. Exemplo:

var frame = document.getElementById("conteudo");
var frameconteudo = (frame.contentWindow || frame.contentDocument);
if (frameconteudo.document) frameconteudo = frameconteudo.document;
frameconteudo.getElementsByTagName('a')[0].baseURI = ""

1
  • Deu certo obrigado. Mas resolvi isso com a tag EMBED do HTML 5 Commented 16/01/2021 às 0:26

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .