Heim > Web-Frontend > js-Tutorial > Beispiel für die Verwendung von Iframe-Elementen in Vue-Komponenten

Beispiel für die Verwendung von Iframe-Elementen in Vue-Komponenten

小云云
Freigeben: 2018-05-15 11:34:29
Original
6505 Leute haben es durchsucht

In diesem Artikel wird hauptsächlich der Beispielcode für die Verwendung von Iframe-Elementen in Vue-Komponenten vorgestellt. Jetzt werde ich ihn mit Ihnen teilen und Ihnen hoffentlich helfen.

Sie müssen die Hyperlinks in der Vue-Komponente auf dieser Seite anzeigen. Methoden, um die Adressleiste unverändert zu lassen:

<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>
Nach dem Login kopieren

Wenn Sie verhindern müssen, dass Elemente auf derselben Ebene überschrieben werden , können Sie

Code kopieren hinzufügen. Der Code lautet wie folgt:


Aber HTML5 hat ein neues Dialogelement im Dialogfeld.

Einige Iframe-Methoden:

Iframe-Inhalt abrufen:

 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
Nach dem Login kopieren

Adaptives Iframe:

Das heißt, 1. Entfernen Sie die Bildlaufleiste, 2. Festlegen die Breite und Höhe

var iwindow = iframe.contentWindow;
var idoc = iwindow.document;
iframe.height = idoc.body.offsetHeight;
Nach dem Login kopieren

Beispiel:

<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>
Nach dem Login kopieren

Verwandte Empfehlungen:

Detaillierte Erläuterung der drei Schreibformen von Vue-Komponenten

So veröffentlichen Sie Vue-Komponenten in npm

Zwei-Wege-Bindung von Vue2.0-Daten und Formular-Bootstrap+Vue-Komponenten

Das obige ist der detaillierte Inhalt vonBeispiel für die Verwendung von Iframe-Elementen in Vue-Komponenten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage