Disable links in an iframe

Asked

Viewed 100 times

0

I am unable to find a solution that disables links within an IFRAME.

I’ve seen on the web the option to use a pointer-Events: None; within CSS. This works, but ends up making the scroll of the page I used in iframe end up being blocked.

I also saw that you have the option to use the SANDBOX attribute in IFRAME, but note that in my code this attribute is there, but I still can’t get the answer.

I appreciate your support, I’ll put the code below.

<!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>
javascript html css iframe

1 answer

0

Fernando, I don’t know if this is what you need, but if you have access to the external url you are using you can manipulate the contents of the frame. Example:

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

  • Thanks worked out. But I solved this with the EMBED tag of HTML 5

Browser other questions tagged javascript html css iframe

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