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);

iframe 的基本用法相关推荐

html中iframe标签的用法详解
<iframe>是什么?html中iframe标签的用法详解 原创  2018-10-26 10:24:35 03690 经常进行页面布局的人对于HTML中的iframe标签一定不 ...
iframe是什么？html中iframe标签的用法详解
经常进行页面布局的人对于HTML中的iframe标签一定不陌生,iframe标签是一个内联框架,说白了就是用来在当前 HTML 页面中嵌入另一个文档的.刚刚接触前端的小伙伴可能不知道html中ifra ...
表单标签和iframe标签的用法
今天来看一下表单标签和frame标签的用法. 1. 表单标签表单(form)是用户输入信息与网页互动的一种形式.大多数情况下,用户提交的信息会发给服务器,比如网站的搜索栏就是表单.表单由一种或多种的 ...
iframe属性与用法
iframe标签小明说,iframe是能耗最高的一个元素,尽量减少使用. 小蓝说,iframe的安全性太差,尽量减少使用. 虽然他们说的是真的,但是iframe的强大功能是不容忽视的,而且现在不乏公 ...
H5 iframe标签的用法
功能:iframe标签用于定义内联框架. 语法:<iframe></iframe> 注意: 在很多网页上使用某些公共部分时,需要给iframe 设置宽度,不然内容只会显示一部分 ...
【JS】iframe 嵌入页面用法
文章目录基本使用基本使用基本使用方式就是: <style type="text/css">/* 推荐使用css设置iframe的样式,因为height设置成100 ...
转自简书：关于iframe嵌套页面用法
1.在HTML中写入iframe标签 <iframe name="my-iframe" id="my-iframe" src="初始显示的页面或 ...
关于iframe嵌套页面用法
1.在HTML中写入iframe标签 <iframe name="my-iframe" id="my-iframe" src="初始显示的页面或 ...
iframe属性及用法
1.frameborder 值为 1或0 规定是否显示框架周围的边框 1是显示 0不显示 2.height 值为 px或% 设置iframe的高度 3.marginheight 值为 ...
学习HTML：iframe用法总结收藏
<iframe>是框架的一种形式,也比较常用到. 一:几个例子--演示iframe的基本用法例1: <iframe width=420 height=330 frameborder ...

iframe 的基本用法

iframe 的基本用法相关推荐

最新文章

热门文章