How to use iframe elements in vue components

This article mainly introduces the sample code for using iframe elements in vue components. The editor thinks it is quite good. Now I will share it with you and give it as a reference. Let’s follow the editor and take a look.

This article introduces the sample code for using iframe elements in the vue component and shares it with everyone. The details are as follows:

Need to display the vue component in this page Methods to keep hyperlinks and address bars from changing:

<template>
 <p class="accept-container">
   <p class="go-back" v-show="goBackState" @click="goBack">GoBack</p>
<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>
 </p>
</template>
<script>
export default {
 name: &#39;hello&#39;,
 data () {
 return {
  iframeState:false,
  goBackState:false,
  webAddress: [
  {
   name:&#39;segmentFault&#39;,
   link:&#39;https://segmentfault.com/a/1190000004502619&#39;
  },
  {
   name:&#39;博客&#39;,
   link:&#39;http://vuex.vuejs.org/&#39;
  },
  {
   name:&#39;特效&#39;,
   link:&#39;http://www.yyyweb.com/377.html&#39;
  }
  ]
 }
 },
 mounted(){
 const oIframe = document.getElementById(&#39;show-iframe&#39;);
 const deviceWidth = document.documentElement.clientWidth;
 const deviceHeight = document.documentElement.clientHeight;
 oIframe.style.width = deviceWidth + &#39;px&#39;;
 oIframe.style.height = deviceHeight + &#39;px&#39;;
 },
 methods:{
 goBack(){
  this.goBackState = false;
  this.iframeState = false;
 },
 showIframe(){
  this.goBackState = true;
  this.iframeState = true;
 }
 }
}
</script>
<style scoped>
</style>

You need to prevent elements at the same level from being overwritten. You can add

<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>

, but HTML5 has a new dialog element for dialog boxes.

Some methods of iframe:

Get iframe content:

 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

Adaptive iframe:

That is, 1 remove the scroll bar, 2 set the width and height

var iwindow = iframe.contentWindow;
var idoc = iwindow.document;
iframe.height = idoc.body.offsetHeight;

Example:

<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>

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

How to implement Tuya in WeChat applet

Detailed explanation of how to use parent components "outside" React components

Detailed interpretation of the iterable protocol in ES6 syntax

The above is the detailed content of How to use iframe elements in vue components. For more information, please follow other related articles on the PHP Chinese website!