How to preview link with iframe and javascript?

Sunday 10th of January 2021 05:58:27 PMjavascript

You can preview the results at: Demo link

Today we will learn how to build the content view of the target link when clicking on a link without having to redirect and reload the page.

HTML structure

<div id="app">
    <div class="box">
        <div class="title">How to preview link with iframe and javascript?</div>
        <div class="note"><small>Note: Click to every link on content below to preview</small></div>
        <div id="content">
            We'll first attach all the events to all the links for which we want to <a href="https://htmlcssdownload.com/">preview</a> with the addEventListener method. In this method we will create elements including the floating frame containing the preview pane, the preview pane off button, the iframe button to load the preview content.
        </div>
        <h3>Preview the link</h3>
        <div id="result"></div>
    </div>
</div>

We'll first attach all the events to all the links for which we want to preview with the addEventListener method. In this method we will create elements including the floating frame containing the preview pane, the preview pane off button, the iframe button to load the preview content.

<script type="text/javascript">
    (()=>{
        let content = document.getElementById('content');
        let links = content.getElementsByTagName('a');
        for (let index = 0; index < links.length; index++) {
            const element = links[index];
            element.addEventListener('click',(e)=>{
                e.preventDefault();
                openDemoLink(e.target.href);
            })
        }

        function openDemoLink(link){

            let div = document.createElement('div');
            div.classList.add('preview_frame');
            
            let frame = document.createElement('iframe');
            frame.src = link;
            
            let close = document.createElement('a');
            close.classList.add('close-btn');
            close.innerHTML = "Click here to close the example";
            close.addEventListener('click', function(e){
                div.remove();
            })
            
            div.appendChild(frame);
            div.appendChild(close);
            
            document.getElementById('result').appendChild(div);
        }
    })()
</script>

Then we will define the css for these elements to look good

<style>
        body{display: flex;align-items: center;justify-content: center;min-height: 100vh;background: #433262;min-width: 600px;font-family: Arial, Helvetica, sans-serif;margin:0px;}
        .box{width: 500px;padding:20px;background: #fff;border-radius: 20px;}
        .box .title{text-align: center;font-size: 19px;font-weight: bold;margin-bottom: 20px;}
        .box #content{line-height: 22px;}
        .box #content a{color:#06c;text-decoration: underline;}
        .box .note{margin-bottom: 20px;text-align: center;}
        .box #result{position: relative;}
        .preview_frame{width:100%;height: 500px;}
        .preview_frame iframe{width:100%;height: calc(100% - 40px);border: none;margin-top: 40px;}
        .preview_frame .close-btn{top:0px;right:0px;height:40px;z-index:1;color:#fff;background:#000;position: absolute;;left:0px;text-align:center;align-items:center;justify-content:center;display:flex;cursor:pointer;cursor:pointer;opacity:0.8}
        .preview_frame .close-btn:hover{opacity:0.5;}
    </style>

Full source code

<!DOCTYPE html>
<html>
<head>
    <title>How to preview link with iframe and javascript? - HtmlcssDownload.com</title>
    <style>
        body{display: flex;align-items: center;justify-content: center;min-height: 100vh;background: #433262;min-width: 600px;font-family: Arial, Helvetica, sans-serif;margin:0px;}
        .box{width: 500px;padding:20px;background: #fff;border-radius: 20px;}
        .box .title{text-align: center;font-size: 19px;font-weight: bold;margin-bottom: 20px;}
        .box #content{line-height: 22px;}
        .box #content a{color:#06c;text-decoration: underline;}
        .box .note{margin-bottom: 20px;text-align: center;}
        .box #result{position: relative;}
        .preview_frame{width:100%;height: 500px;}
        .preview_frame iframe{width:100%;height: calc(100% - 40px);border: none;margin-top: 40px;}
        .preview_frame .close-btn{top:0px;right:0px;height:40px;z-index:1;color:#fff;background:#000;position: absolute;;left:0px;text-align:center;align-items:center;justify-content:center;display:flex;cursor:pointer;cursor:pointer;opacity:0.8}
        .preview_frame .close-btn:hover{opacity:0.5;}
    </style>
</head>
<body>
<div id="app">
    <div class="box">
        <div class="title">How to preview link with iframe and javascript?</div>
        <div class="note"><small>Note: Click to every link on content below to preview</small></div>
        <div id="content">
            We'll first attach all the events to all the links for which we want to <a href="https://htmlcssdownload.com/">preview</a> with the addEventListener method. In this method we will create elements including the floating frame containing the preview pane, the preview pane off button, the iframe button to load the preview content.
        </div>
        <h3>Preview the link</h3>
        <div id="result"></div>
    </div>
</div>
   
<script type="text/javascript">
    (()=>{
        let content = document.getElementById('content');
        let links = content.getElementsByTagName('a');
        for (let index = 0; index < links.length; index++) {
            const element = links[index];
            element.addEventListener('click',(e)=>{
                e.preventDefault();
                openDemoLink(e.target.href);
            })
        }

        function openDemoLink(link){

            let div = document.createElement('div');
            div.classList.add('preview_frame');
            
            let frame = document.createElement('iframe');
            frame.src = link;
            
            let close = document.createElement('a');
            close.classList.add('close-btn');
            close.innerHTML = "Click here to close the example";
            close.addEventListener('click', function(e){
                div.remove();
            })
            
            div.appendChild(frame);
            div.appendChild(close);
            
            document.getElementById('result').appendChild(div);
        }
    })()
</script>
    
</body>
</html>