1. What is iframe
1. iframe is an HTML element used to embed another web page in a web page.
2. iframe has a width and height by default, and there is a border.
3. iframe is an inline block-level element that can be modified through display.
2. iframe element attributes
1. src: specifies the address of the inline web page
2. Frameborder: iframe has a border by default. You can set frameborder to 0 to clear the border.
3. width, height: control the width and height of iframe.
4. name: The name of the framework.
5. srcolling: whether scrolling is possible, yes, no, auto
3. iframe interoperability
1. First of all, make it clear that each iframe maintains its own global window object.
2. In addition, reading, writing, and modification between iframes can only be performed in the same domain. When crossing domains, only simple route jumps can be performed.
3. Use window.frames[name] on the parent level to get the window object of the child iframe, and accordingly you can get the document object to perform dom operations on the child iframe.
4. If you want to operate the iframe of the parent element in the child iframe, directly use the child element's window.parent to obtain the window object of the parent element, thereby obtaining the document to operate the dom.
4. Communication between iframes
1. Send a message
When we want to send information to a specified iframe, we must first obtain the iframe's own window object, and then use the postMessage of the window object to send the message.
2. Accept information
Where we want to receive information, we use the window's onmessage event to receive the information. The event will return an event object, where data contains the returned data, and orgin returns the sending source.
3. Security issues
When we know exactly who orgin is, don't use ' * ' When we want to receive information, we first determine whether orgin is the source we want to receive, and then do subsequent operations.
5. Advantages/Disadvantages
advantage :
Solve the problem of slow loading of third-party content such as icons and advertisements.
Ability to load scripts in parallel.
Convenient management means that if there are multiple pages that need to use the content of iframe, then you only need to modify the content of iframe to achieve unified management.
iframe can display the embedded web page intact.
shortcoming :
It will generate a lot of pages, which is not easy to manage.
It will increase the http request of the server, which is not advisable for large URLs.
Will block the load event of the parent page.
The iframe and the main page share the connection pool, and when the browser has limited connections to the same domain, it will affect the parallel loading of the page, which means that the number of requests for the subdocument and the parent document will be calculated together.
It is not conducive to search engine optimization, that is, it is not conducive to SEO.
Solution: If you need to use iframe, it is best to dynamically add the src attribute to iframe through JavaScript, so that you can bypass the above two problems.
6. Precautions
1. When obtaining the document of a sub-element, make sure that all DOM elements of the sub-element have been mounted. Therefore, when writing natively, it must be written in the onLoad event of the window.
Example:
There is only one place where iframe is used in this project of mine. Let me briefly introduce it.
The effect displayed after clicking on the large screen in the exhibition hall on the left
For this requirement, we need to configure the routing address of the large-screen display page
Complete code:
<template>
<!-- iframe(HTML标签,用于在网页中嵌套另外一个网页) -->
<iframe
src="/bigscreen/index"
frameborder="0"
width="3385"
height="1372"
scrolling="no"
:style="'transform-origin: 0px 0px;transform: scaleX(' + scaleX + ') scaleY(' + scaleY + ');'"
></iframe>
</template>
<script>
export default {
name: 'IframeBigScreenView',
data() {
return {
scaleX: document.body.clientWidth / 3385,
scaleY: document.body.clientHeight / 1372,
}
},
mounted() {
window.onresize = () => {
return (() => {
this.scaleX = document.body.clientWidth / 3385
this.scaleY = document.body.clientHeight / 1372
})()
}
document.title = '智慧党建城市运行中心'
document.body.style = 'overflow:hidden;background: #050a2a;'
},
destroyed() {
// 离开页面生命周期函数
document.body.style = ''
},
created() {
window.handleJumpTo = function (url) {
// this.$router.push('/8a50e37f0d4e29b90280df77adf1f387')
window.location.href = url
}
},
methods: {},
}
</script>
<style>
</style>
another:
Complete code (can be adapted):
<template>
<div class="app-container">
<iframe :src="src" ></iframe>
</div>
</template>
<script setup name="resource">
const src = ref('http://grxxxxxxxx3000/d/9CWBz0bik/lxxxxxxxxxx?orgId=1');
</script>
<style scoped lang="scss">
html,body,iframe{
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
iframe{
border: none;
}
</style>
Add loading loading effect to iframe:
The loading style of loading can be customized and viewed on the element official website.
First, nest a div outside the iframe tag, and add loading to the outer div.
Use attachEvent to determine whether the iframe is loaded.
Complete code:
<template>
<div class="app-container">
<div
v-loading="loadingIframe"
element-loading-text="拼命加载中..."
style="width: 100%;height: 100%;overflow: hidden;"
>
<iframe class="ifra" :src="src" ></iframe>
</div>
</div>
</template>
<script setup name="resource">
import {onMounted} from "vue";
import { getCurrentInstance } from 'vue'
const src = ref('http://grafana.huhehe.cn:3000/d/9CWBz0bik/linuxxi-tong-jian-kong?orgId=1');
const loadingIframe = ref(true);
const { proxy } = getCurrentInstance()
onMounted(() => {
iframeLoad();
});
function iframeLoad() {
proxy.$nextTick(() => {
const iframe = document.querySelector('.ifra');
//attachEvent: 处理兼容性问题
if (iframe.attachEvent) {//兼容IE
iframe.attachEvent("onload", function () {
// 加载完成
loadingIframe.value = false;
});
} else {
iframe.onload = function () {
// 加载完成
loadingIframe.value = false;
};
}
});
}
</script>
<style scoped lang="scss">
html,body,iframe{
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
iframe{
border: none;
}
</style>