Hi，大家好，我是编程小6，很荣幸遇见你，我把这些年在开发过程中遇到的问题或想法写出来，今天说一说iframe 的基本用法「建议收藏」,希望能够帮助你!!!。

1.iframe src 可以展示 index.html 网页
2.iframe src 可以展示 文件链接
3…iframe src 可以展示 base64 链接

    const input = document.querySelector("#upload");
        input.addEventListener('change', function () { 
   
            const files = this.files;
            console.log(files, '===123')
            const fileList = Object.entries(files).map(([_, file]) => { 
   

                // 导入浏览器重
                // 文件的方法
                // var file = fileInput.files[0];
                // if (window.FileReader) { 
   
                // var reader = new FileReader();
                // reader.onloadend = function (evt) { 
   
                // if (evt.target.readyState == FileReader.DONE) { 
   
                // callback(evt.target.result);
                // }
                // };
                // // 包含中文内容用gbk编码
                // reader.readAsText(file, 'gbk');
                // }
                // ------------------------------------------------------------------

                // const reader = new FileReader(); //这是核心,读取操作就是由它完成.
                // reader.readAsText(file);//读取文件的内容,也可以读取文件的URL
                // reader.onload = function () { 
   
                // //当读取完成后回调这个函数,然后此时文件的内容存储到了result中,直接操作即可
                // console.log(this.result);

                // let debug = this.result

                // // 文件预览

                // // let textarea = document.createElement('textarea')
                // // textarea.value = debug;

                // // document.body.appendChild(textarea)


                // // 生成文件链接 iframe 来解析文件连接======================================
                // // var blob = new Blob([debug], { type: 'text/plain' })
                // // var url = window.URL.createObjectURL(blob)
                // // // 打开预览 浏览器默认支持的格式都可以预览，如：txt，pdf，图片
                // // var iframe = `<iframe width='100%' height='100%' src=${url}></iframe > `
                // // var x = window.open()
                // // x.document.open()
                // // // charset="gb2312"
                // // // charset="gbk"
                // // // charset="UTF-8"

                // // // x.document.charset = "gbk"
                // // // x.document.designMode = "On"
                // // x.document.write(iframe)
                // // x.document.close()

                // }

                // ========================================================================== base64 预览
                const reader = new FileReader(); //这是核心, 读取操作就是由它完成.
                reader.readAsDataURL(file, 'gbk');     // 生成base64 图片 内容 字节码 链接
                reader.onload = (e) => { 
   

                    file.preview = e.target.result;

                    // 转化样式


                    // // 打开预览 浏览器默认支持的格式都可以预览，如：txt，pdf，图片
                    var iframe = "<iframe width='100%' height='100%' src='" + e.target.result + "'></iframe>"
                    var x = window.open()
                    x.document.open()
                    x.document.write(iframe)
                    x.document.close()


                    // 打开界面方式
                    // <a href="data:xxxxx"> 点击跳转
                    // window.open(“data:xxx”)
                    // window.location="data:xxx"

                    // 打开图片
                    // const img = new Image();
                    // img.src = this.base64String;
                    // const newWin = window.open("", "_blank");
                    // newWin.document.write(img.outerHTML);
                    // newWin.document.title = "流程图"
                    // newWin.document.close();

                }
                return file;




            });



            /* * file中的preview存的就是可以预览使用url,如果你需要保证fileList的顺序, * 请不要使用这种方式,你可以采用索引的方式存储,来保证它的顺序一致性 */
            // console.log(fileList);
        }, false);