“This is the sixth day of my participation in the Gwen Challenge in November. Check out the details: The Last Gwen Challenge in 2021.”

Requirements:

Because the loading of iframe is slow, you need to add the loading effect before the loading is complete.

In this article, loading uses the loading component of Element framework.

Function complete code

<template>
  <div style="height:1000px;" v-loading="loading">
    <iframe 
      ref="Iframe" 
      src="https://www.taobao.com/" 
      width="100%" 
      height="100%" 
      frameborder="0">
    </iframe>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loading: false}; },methods: {
    iframeLoad(){
      this.loading = true;
      const iframe = this.$refs.Iframe;
      if (iframe.attachEvent) { // IE
        iframe.attachEvent('onload'.() = > { this.loading = false; });
      } else { / / not IE
        iframe.onload =  () = > { this.loading = false; }; }}},mounted() {
    this.iframeLoad(); }};</script>
Copy the code

Knowledge of the < iframe > tag

Definition and Usage:

The iframe element creates an inline frame (that is, an inline frame) that contains another document.

Tip:

  1. You can place the desired text between < iframe > and < /iframe > so that you can handle browsers that don’t understand iframe;
  2. Define styles for < iframe > (including scrollbars) using CSS.

< iframe > Attribute of the tag

attribute value describe
frameborder 1 has a border (default); 0 Close border Specifies whether to display the border around the iframe
height Px; %; Specify the height of the IFrame
longdesc URL Specify a page that contains a longer description of the IFrame
marginheight px Defines the top and bottom margins of the iframe
marginwidth px Define the left and right margins of the iframe
name frame_name Specify the name of an iframe
scrolling Yes; No; Auto; Specifies whether to display a scroll bar in an IFrame
seamless seamless Specify that < iframe > appears to contain part of the document
src URL Specifies the URL of the document to display in the iframe
srcdoc HTML_code Specifies the HTML content of the page to be displayed in < iframe >
width Px; %; Define the width of an iframe
sandbox “”; Allow – forms; Allow – same – origin; Allow scripts; Allow – top – navigation; Enable a series of additional restrictions on the content in < iframe >.
sandbox “”; Allow – forms; Allow – same – origin; Allow scripts; Allow – top – navigation; Enable a series of additional restrictions on the content in < iframe >.
align The left; Right; Top; The middle; Bottom; Use is not approved. Use styles instead. Specifies how to align the frame based on surrounding elements.

Global properties

The < iframe > tag supports global attributes in HTML.

Event attributes

The < iframe > tag supports event attributes in HTML.

Browser support

All major browsers support the < iframe > tag.