vue组件中使用iframe元素的示例代码

vue组件中使用组件中使用iframe元素的示例代码元素的示例代码

本篇文章主要介绍了vue组件中使用iframe元素的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做

个参考。一起跟随小编过来看看吧

本文介绍了vue组件中使用iframe元素的示例代码，分享给大家，具体如下：

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

<template>

<div class="accept-container">

<div class="go-back" v-show="goBackState" @click="goBack">GoBack</div>

</div>

</template>

<script>

export default {

name: 'hello',

data () {

return {

iframeState:false,

goBackState:false,

webAddress: [

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

},

{

name:'特效',

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

}

]

}

},

mounted(){

methods:{

goBack(){

this.goBackState = false;

this.iframeState = false;

},

showIframe(){

this.goBackState = true;

this.iframeState = true;

}

}

<iframe id="dialogFrame" frameborder="0" scrolling="no" style="background-color:transparent; position: absolute; z-index: -

1; width: 100%; height: 100%; top: 0;left:0;"></iframe>

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

iframe的一些方法：

获取iframe内容：