记录iframe属性src与srcdom动态切换

时间 2021-02-17

标签 html 后端 app dom 学习测试 this code htm 栏目 HTML 繁體版

原文原文链接

需求实现:

根据数据动态展现pdf或者html文件,前台进行展现,综合考虑iframe能够二者同时实现,pdf展现经过后台返回带html

data:application/pdf;base64,

格式的base64文件流放在src属性后面能够进行正常展现,若是是要展现html的话,能够让后端处理成带html标签的数据进行返回,放在srcdom属性中能够郑州展现.后端

下面是代码展现:
<iframe id="myNodeFrame" :src="linkAddress" :srcdoc="linkAddressDoc" ref="iframe" frameborder="0" width="100%" style="margin-top:10px;height:calc(100% - 15px);"></iframe>app

经过方法动态展现:
tip: 这里能够根据本身需求来进行判断,在何时须要什么样子的东西展现,若是不须要必须使用removeAttr方法移除此属性,设置空值不起做用我已经测试过了.dom

if(data.fileType == 3) { //html
    this.linkAddressDoc = res.data;
    $('#myNodeFrame').removeAttr('src');
} else if(data.fileType == 2) { //pdf
    this.linkAddress = res.data;
    $('#myNodeFrame').removeAttr('srcdoc');
}

欢迎评论共同窗习,共同成长.学习