Iframe gives you a good reason not to upgrade the Webpack and Plugin versions

Recently, I have been busy developing new requirements and fixing bugs left by my colleagues

With hot fingers and residual temperature, water an article 😊

Today, the article is about iframe tag use experience trouble you gentlemen, like 👍 collection + pay attention to 😁

iframe

To paraphrase the OFFICIAL W3C explanation, the iframe element creates an inline frame (that is, an inline frame) containing another document.

An IFrame is an isolated sandbox that allows you to manipulate multiple tabs within a single page.

In this way, you can create an unlimited number of new projects within the old project, using iframe, and you don’t have to worry about the upgrade.

You love me, I love you 🤟, drip drip…

Application scenarios

Nest another project (web page) in your Want business page!!

Yes, you understand correctly, when we are maintaining an old project, such as Webpack 2 old project 🙏, which is huge and has no time to upgrade the Webpack version and the latest plugin, then tell you a lazy way, that is == “iframe;

Iframe is used for basic purposes

    <iframe src="asscre.com" />
Copy the code

Iframe common attributes:

Notes on experience in actual development

Since it is to solve the old project lazy not to upgrade the problem, then, we have to do the following SAO operation 😁 :

Iframe cross-domain problem: Blocked a frame with origin XXX from accessing a cross-origin;

When it comes to cross-domain, the browser determines whether it is cross-domain based on two points:

• The protocol of your web page,
• Are your hosts the same, i.e., the header of the URL:

    window.location.protocol +window.location.host
Copy the code

Here’s how I used it:

postmessage:

• This method is mounted to the Window object, that is, usingwindow.postmessage()The call.
• The method takes two arguments:postMessage(message, targetOrigin):
• message: The content passed to an iframe, usuallyString, can also passobject.

Note: Please refer to this sentence before passing the object:

Objects listed in transfer are transferred, not just cloned, meaning that they are no longer usable on the sending side.

You don’t want to pass an Object directly.

If you must, it is recommended to use json.stringify for conversion.

Solutions:

The child pages

Send a message: Use the PostMessage method

    // * is used to handle cross-domain problems
    window.postMessage("message".The '*');
    
    // When we need to listen for multiple firing methods in an iframe
    We just need to define the first argument in the postMessage method as an object object
    window.postMessage({ type: 'updateGuide' }, The '*');
Copy the code

Then in the parent page

Accept messages: Listen for message events

    window.addEventListener('message'.function (e) {
        console.log(e.data);
    })
    
    // When we need to listen for multiple firing methods in an iframe
    window.addEventListener('message'.function (e) {
        if (e.data.type === 'updateGuide') {
            this.$bus.$emit('updateGuide');
          } else if(a)... })Copy the code

The Event object provided by Message has three important properties: data, Origin, and Source.

• data: postMessage is the value passed in;
• origin: the domain of the document that sent the message;
• source: The proxy for the Window object that sends the message document. If it is from the same domain, the object is window and all its methods can be used. If it is from a different domain, the window can only return information by calling the postMessage() method.

Prevent others white piao we 😁 : prevent nesting, prevent fishing

Two points to note when using iframe are:

• Your web page is iframe by someone else: previous onesMHT birthday q coins,Ak-47s on the way inThe kind of phishing website! Know all understand 😈
• You iframe someone else’s web page: this is their own understanding of the understanding, HHH

So, we in order to safety, safety measures to do!

Anti-nested web pages

To prevent phishing, use window.top to prevent your page from being iframe.

• Under the same domain:

    // Restrict your web page to not be nested within any web page
    if(window! =window.top){
        window.top.location.href = correctURL;
    }
    
    // OR => If the iframe of the same domain is referenced, the domain name can be determined
    
    if(top.location.host ! =window.location.host) {
      top.location.href = window.location.href;
    }
Copy the code

• Under different domain names

    try{
      top.location.hostname;  // Check if there is an error
      // If there is no error, the process is degraded
      if(top.location.hostname ! =window.location.hostname) { 
        top.location.href =window.location.href; }}catch(e){
      top.location.href = window.location.href;
    }
Copy the code

That way, when people want to fuck us for nothing, or want to do something unspeakable, we can just say: NO! Shut the door!

Well, that’s all for today’s sharing. Thank you for reading!

Daily summary a little bit, I am Asscre, welcome to help me like 👍 favorites + follow!

See you next time!