学习日记：file上传PDF文件，动态创建iframe弹窗预览PDF，修改src时加载两次。

本文链接：https://blog.csdn.net/qq_52330660/article/details/134165419

在写预览PDF时候，遇到iframe改变src时会出现加载两次的情况。

采取动态生成、销毁的方式解决。

记录一下遇到的问题

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <input type="file" id="file" onchange="upload()" multiple>


    <!--<input class="btn btn-primary " type="button" id="show1" value="" onclick="showOpenPdf(this.src)" />-->

    <div id="OpenPdf">
        <h3>查看PDF</h3>
        <input class="btn btn-primary " onclick="hide()" value="关闭" type="button" />
        <div id="content" style="width: 100%; height: 85%"></div>

        <div>
            <br />
        </div>
    </div>

    <div id="show_pdf">
    </div>

    <script type="text/javascript">
        var filename = document.getElementById('file');
        var show_pdf = document.getElementById('show_pdf');
        filename.onchange = function () {
            var file = this.files;

            if (filename.files[0] == undefined) {
                alert('未成功上传文件！');
            }
            else {
 
                //document.getElementById("show1").setAttribute("value", filename.files[0].name);

                for (let i = 0; i < filename.files.length; i++) {
                    var reader = new FileReader();
                    reader.readAsDataURL(file[i]);
                    reader.onload = function (e) {

                        //var showpdf1 = document.getElementById("show1");
                        //showpdf1.src = reader.result;
                        var div = document.createElement("div");
                        var input = document.createElement("input");
                        input.setAttribute('value', filename.files[i].name);
                        input.setAttribute('src', e.target.result);
                        input.setAttribute('class', 'btn btn-primary');
                        input.setAttribute('type', 'button');
                        input.setAttribute('onclick', 'showOpenPdf(this.src)');
                        div.appendChild(input);
                        show_pdf.appendChild(div);
                        show_pdf.style.display = 'block';

                    }

                }
                

            }
        };


    </script>

    <script type="text/javascript">
        let OpenPdf = document.querySelector('#OpenPdf');
        OpenPdf.style.display = 'none';
        function hide() {
            // 获取对话框元素并隐藏
            closeiframe();
            OpenPdf.style.display = 'none';
        };
        function showOpenPdf(src) {

            OpenPdf.querySelector('input').style.display = 'block';

            if (OpenPdf.style.display == 'none') {
                createiframe(src);
                OpenPdf.style.display = 'block';
            }
            else if (OpenPdf.style.display == 'block') {
                closeiframe();
                OpenPdf.style.display = 'none';
            }
        };
    </script>

    <style>
        #OpenPdf {
            position: absolute;
            z-index: 9999;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 60%;
            height: 60%;
            background-color: #fff;
            border: 1px solid #ccc;
            box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
            border-radius: 5px;
            padding: 40px;
            display: none;
        }

        h3 {
            margin-top: 0;
        }

        #OpenPdf div {
            margin-top: 10px;
        }

        #OpenPdf button {
            margin-right: 20px;
            float: right;
        }
    </style>

    <script>
        //创建iframe
        function createiframe(src) {
            const iframe = document.createElement("iframe");
            //传入iframe的src
            iframe.id = "ifr";
            iframe.width = "100%";
            iframe.height = "100%";
            document.getElementById("content").appendChild(iframe);
            iframe.src = src;

            console.log("创建iframe完成");
        }
        //删除iframe
        function closeiframe() {
            let iframe = document.getElementById("ifr");

            iframe.onload = function () {
                
                iframe.src = "about:blank";
                
                //iframe.contentWindow.document.write('');
                //iframe.contentWindow.document.clear();
                //iframe.contentWindow.close();
                iframe.parentNode.removeChild(iframe);
                iframe = null;
            };
            document.body.appendChild(iframe);
        }
        //监听iframe页面发出的信息，销毁iframe
        window.addEventListener("message", (e) => {
            closeIframe();
        },
            false
        );
    </script>
</body>
</html>

参考文章：

iframe的使用动态添加_js 动态创建iframe-CSDN博客

JavaScript 自定义弹出窗口_js弹出自定义窗口-CSDN博客