Vue 组件使用ifranme元素

一、说明

      有的时候我们会想不改变url地址栏的时候改变当前页面的内容，这个时候很多人都会想到用ifranme，这边文章就来介绍下如何在vue项目中使用ifranme

二、效果图

三、code

      1、新建一个vue文件：ifranme-demo.vue

<template>
  <div>
    <Card>
       链接地址：
       <Input v-model="inputUrl" placeholder="输入链接地址,按回车前往" 
          style="width: 300px" @on-enter="openInIframe" clearable />&nbsp;
       <Button type="primary" icon="ios-send" @click="openInIframe">前往</Button>&nbsp;
       <Button icon="md-open" @click="openNewWindows">在新窗口打开</Button>
      <Divider style="margin-bottom: 0px;" />
      <Row>
        <iframe
          frameborder="0"
          name="showHere"
          scrolling="auto"
          :src="iframeUrl"
          style="width: 100%;height: 550px;"
        ></iframe>
      </Row>
    </Card>
  </div>
</template>

<script>
export default {
  name: 'ifranme-demo',
  components: {},
  data() {
    return {
      inputUrl: 'http://www.baidu.com',
      iframeUrl: 'http://www.baidu.com'
    }
  },
  computed: {},
  mounted() {
  },
  methods: {
    openInIframe() {
      this.iframeUrl = this.inputUrl
    },
    openNewWindows() {
      window.open(this.inputUrl, '_blank')
    }
  }
}
</script>

<style>
</style>

      主要的是下面这段代码

<iframe frameborder="0" name="showHere" scrolling="auto" :src="iframeUrl" style="width: 100%;height: 550px;"></iframe>

      2、路由配置指向当前的vue文件

{
    path: 'ApiDocument',
    name: 'api_document',
    meta: {
        title: 'Api文档',
        icon: 'ios-document'
    },
    component: () => import('@/view/ifranme-demo/iframe-demo.vue')
}

      下面附加一些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