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

Iframe nested third-party pages

We need to get the nested address through an interface. Then assign the changed address to the SRC of the iframe as followsCopy the code
<template> <div> <iframe :src="httpIframeUrl" class="whiframe" scrolling="yes" ></iframe> </div> </template> <script lang="ts"> import { defineComponent, getCurrentInstance, ref } from 'vue' import { useRoute } from 'vue-router' export default defineComponent({ setup() { let route = useRoute() Let httpIframeUrl = ref (') if (route. Query. ProcessInstanceId) {this $apihttps. Then (res = > {/ / return the value after the assignment to the iframe SRC Httpiframeurl.value = res}). Catch (() => {window.$message.error(' address not found ')})} else { $message.error(' no process instance ')} return {httpIframeUrl}}, }) </script> <style lang="scss" scoped> .whiframe { width: 100%; height: 100%; } </style>Copy the code

Something unexpected has come up

I thought everything would be all right and I could happily get off work! But an accident happened ~~~ Woo could not open the page, Sandbox ="allow-scripts allow-top-navigation allow-same-origin allow-popups" <iframe: SRC ="httpIframeUrl" class="whiframe" scrolling="yes" sandbox="allow-scripts allow-top-navigation allow-same-origin allow-popups" ></iframe> Allow-scripts ==> Several common sandbox properties allow-scripts==> allow nested child pages to execute script allow-top-navigation==> allow iframe content to navigate (load) content from the containing document. Allow-forms ==> Allow-same origin==> Allow-same origin==> Allow-same origin==> Allow-same originCopy the code

There’s another accident

Chrome 80 and later restores the SameSite cookie policy. If the iframe is loaded with a cookie in Chrome80, the cookie will be lost in the iframe, so that the interface that is dependent on the cookie will have problems. Secure and that Cookie will only be sent if it's over HTTPS and some people will say, "My Firefox doesn't have that, right!" That's what happens when you run Google chrome at the core and up until version 80. After such processing is OK, and then off work, ah!Copy the code

Iframe for lazy loading

<iframe SRC ="your URL "loading="lazy" width="100%" height="100%"></iframe> Loading ="lazy" loading currently supports three properties Lazy ==> Ideal for lazy loading. Eager ==> Load immediately (ideal for non-lazy loading) Auto => Let the browser decide whether to load lazilyCopy the code

Iframe downloads the file

<iframe sandbox="allow-downloads"></iframe> allow-downloads== Allow-downloads-without-user-activation, not recommended for personal use. Because he said he downloaded files without asking users' permission.Copy the code