Comment utiliser les éléments iframe dans les composants vue-js tutoriel-php.cn

Comment utiliser les éléments iframe dans les composants vue

亚连

Libérer： 2018-06-20 18:26:52

original

4565 Les gens l'ont consulté

Cet article présente principalement l'exemple de code pour utiliser les éléments iframe dans les composants Vue. L'éditeur pense que c'est plutôt bon, je vais donc le partager avec vous maintenant et le donner comme référence. Suivons l'éditeur et jetons un coup d'œil.

Cet article présente l'exemple de code pour utiliser les éléments iframe dans les composants vue et le partage avec tout le monde. Les détails sont les suivants :

Vous devez l'afficher. les composants de vue dans cette page. Méthodes pour conserver les hyperliens et les barres d'adresse inchangés :

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

Copier après la connexion

Vous devez empêcher l'écrasement des éléments du même niveau. Vous pouvez ajouter

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

Copier après la connexion

. Cependant, HTML5 dispose d'un nouvel élément de dialogue pour les boîtes de dialogue.

Quelques méthodes d'iframe :

Obtenir le contenu 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

Copier après la connexion

Iframe adaptatif :

C'est-à-dire 1 supprimer la barre de défilement, 2 définir la largeur et la hauteur

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

Copier après la connexion

Exemple :

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

Copier après la connexion

Ce qui précède est ce que j'ai compilé pour vous, j'espère que cela vous sera utile à l'avenir.