Exemple d'utilisation des éléments iframe dans les composants vue-js tutoriel-php.cn

Exemple d'utilisation des éléments iframe dans les composants vue

小云云

Libérer： 2018-05-15 11:34:29

original

6506 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. Maintenant, je vais le partager avec vous et vous donner une référence, j'espère que cela pourra vous aider.

Vous devez afficher les hyperliens dans le composant vue sur cette page. Méthodes pour conserver la barre d'adresse inchangée :

<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

Si vous devez empêcher l'écrasement des éléments d'un même calque. , vous pouvez ajouter

Copier le code Le code est le suivant :

Mais html5 a un nouvel élément de dialogue dans la boîte 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

Recommandations associées :

Explication détaillée des trois formes d'écriture des composants de vue

Comment publier des composants vue sur npm

Liaison bidirectionnelle de données vue2.0 et formulaire bootstrap + composants vue

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!