vue 中iframe 框架_Vue 组件中使用 iframe 元素

需要在本页面中展示 Vue 组件中的超链接，地址栏不改变的方法：

GoBack

• {{item.name}}

export default {

name: 'hello',

data () {

return {

iframeState:false,

goBackState:false,

webAddress: [

{

name:'简书',

link:'https://www.jianshu.com/u/c90f05f0ab2b'

}

]

}

},

mounted(){

const oIframe = document.getElementById('show-iframe');

const deviceWidth = document.documentElement.clientWidth;

const deviceHeight = document.documentElement.clientHeight;

oIframe.style.width = deviceWidth + 'px';

oIframe.style.height = deviceHeight + 'px';

},

methods:{

goBack(){

this.goBackState = false;

this.iframeState = false;

},

showIframe(){

this.goBackState = true;

this.iframeState = true;

}

}

}

需要使同层元素不被覆盖，可以加：

不过html5有新的dialog元素用于对话框。

iframe的一些方法：

获取iframe内容：

var iframe = document.getElementById("iframe1");

var iwindow = iframe.contentWindow;

var idoc = iwindow.document;

console.log("window",iwindow);//获取iframe的window对象

console.log("document",idoc); //获取iframe的document

console.log("html",idoc.documentElement);//获取iframe的html

console.log("head",idoc.head); //获取head

console.log("body",idoc.body); //获取body

自适应 iframe:

即:1、去掉滚动条，2、设置宽高

var iwindow = iframe.contentWindow;

var idoc = iwindow.document;

iframe.height = idoc.body.offsetHeight;

例子：

更多精彩请关注：Vue专题