需要在本頁面中展示vue組件中的超鏈接，地址欄不改變的方法:

GoBack

• {{item.name}}

export default {

name: 'hello',

data () {

return {

iframeState:false,

goBackState:false,

webAddress: [

{

name:'segmentFault',

link:'https://segmentfault.com/a/1190000004502619'

},

{

name:'博客',

link:'http://vuex.vuejs.org/'

},

{

name:'特效',

link:'http://www.yyyweb.com/377.html'

}

]

}

},

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 给iframe设置src_vue组件中使用iframe元素的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。