The introduction

When writing personal website, need to use iframe to reference the local static HTML file, found some differences in the way of reference, here to share.

Vue-cli 2.0 build project references

In vue-CLI 2.0 built projects, if you want to use iframe to reference a local static HTML file, the static file needs to be placed in the same file as SRC with static. The diagram below:

Write “relative path” where iframe is used, as shown below:

Again, it’s worth explaining that the path here doesn’t change after you pack it. All static files are found according to the packed path, so the description of “relative path” above is not accurate, but the packed “relative path”, see the figure below.

This is the packaged file hierarchy

Here I write a lot of.. /.. /.. /, finally found a real reference path or http://localhost:8080/static/blog.html, because find up already to the root directory, so no matter how much write a.. /, the actual path or http://localhost:8080/static/blog.html, so below path to write directly. / static/blog. HTML is the same, according to the above package hierarchy after comparison.

Vue-cli 3.0 build project reference

Using iframe to reference local static HTML files in vue-CLI 3.0 built projects is basically the same as in 2.0, except that static HTML files are placed in a public folder instead of a SRC folder. The diagram below:

Of course, you don’t have to put it in the static folder. The hierarchy of files (including folders) under public files does not change after packaging, so you can customize the name. You can’t change it. You can only put it in the public folder.

Other points of note are the same as the vuE-CLI 2.0 build project, which will not be described in detail.

Is there a method that can be used at any other level, regardless of whether vue-CLI 2.0 or 3.0 builds the project.

Regardless of the project build version approach

1. If you are a Webpack engineer, you configure the packaging yourself.

Okay, that’s crap

2. Introduce using require()

The HTML file is placed at the same level as the vue file, as follows:

In home.vue

<template>
  <div class="home">
    <button @click="clickHandle">switch</button>
    <iframe ref="iframe" frameborder="0" v-if="ifIframe"></iframe>
  </div>
</template>
Copy the code

export default {
  name: "Home".data() {
    return {
      ifIframe: true.iframeData: require("./blog.html")
      // src: "./static/blog.html"
    };
  },
  mounted() {
    this.$refs.iframe.contentDocument.documentElement.innerHTML = this.iframeData;
  },
  methods: {
    clickHandle() {
      // 1. Use DOM operations to switch data source information
      // If you click on the external link information inside the iframe, the SRC will change and may not belong to the same source. The internal DOM of iframe cannot be manipulated by different sources, so use v-if to delete the DOM and then display the clear SRC information
      // It can also be cleared by other means, such as v-bind binding SRC
      // this.ifIframe = false;

      this.$refs.iframe.removeAttribute("src");

      this.$nextTick(() = > {
        // this.ifIframe = true;
        this.$nextTick(() = > {
          this.$refs.iframe.contentDocument.documentElement.innerHTML = require("./second.html");
        });
      });

      // 2. Switching paths prompts switching data
      // this.src = "./static/second.html";}}};Copy the code

It is through the require () get to the file, give the iframe contentDocument. The documentElement. InnerHTML assignment.

One problem with this approach is that iframes from different sources cannot manipulate internal Dom information, so you can use removeAttribute to remove SRC and assign it, as described in the code above.

To use this method, you also need to install the html-loader plug-in, otherwise the files introduced by require() cannot be parsed.

Install using command:

npm i html-loader --save-dev
Copy the code

In vue. Config. js configuration, if you do not have this file, create a new one and put it in the outermost layer.

module.exports = {
  chainWebpack: config= > {
    config.module
      .rule("html")
      .test(/\.html$/)
      .use("html-loader")
      .loader("html-loader"); }};Copy the code

conclusion

Ok, so that’s how you can use iframe to reference a local static HTML file in a Vue project.

In order for you to have a more practical experience, the above two examples wrote a demo uploaded to Github, the above can not understand, you can directly download the example for reference.

Vue-cli2.0 built projects use iframe to reference local static HTML files to demo

Vue-cli3.0 built projects use iframe to reference local static HTML files to demo