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

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

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

<template>
 <div class=\"accept-container\">
   <div class=\"go-back\" v-show=\"goBackState\" @click=\"goBack\">GoBack</div>
<ul>
 <li v-for=\"item in webAddress\">
  <a :href=\"item.link\" rel=\"external nofollow\" target=\"showHere\" @click=\"showIframe\">{{item.name}}</a>
 </li>
</ul>
<iframe v-show=\"iframeState\" id=\"show-iframe\" frameborder=0 name=\"showHere\" scrolling=auto src=\"\"></iframe>
 </div>
</template>
<script>
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;
 }
 }
}
</script>
<style scoped>
</style>

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

复制代码 代码如下:
<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内容：

 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;

例子：

复制代码 代码如下:<iframe id=\”google_ads_frame2\” name=\”google_ads_frame2\” width=\”160\” height=\”600\” frameborder=\”0\” src=\”target.html\” marginwidth=\”0\” marginheight=\”0\” vspace=\”0\” hspace=\”0\” allowtransparency=\”true\” scrolling=\”no\” allowfullscreen=\”true\”></iframe>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。