Monitor the size change of a DOM element through iframe
|
A common problem encountered during the development process is how to monitor the size changes of a div. For example, if I use canvas to draw a chart, when the size of canvas changes, I need to redraw the content inside. At this time, I need to listen to the resize event for processing. Although there is a resize event listener on the window, this cannot meet our needs, because in many cases, the size of the div changes, and the actual window.resize event is not triggered. There are many ways to monitor the resize event of a div, such as timer checking, scroll events, etc. This article mainly introduces how to monitor through the iframe element. However, we can indirectly use the window's resize event listener to implement the resize event listener for a certain div. Please see the specific implementation below. 2. Implementation Principle
Use the iframeWindow.resize event to monitor DOM size changes, thereby achieving a monitoring of the resize event; example
document.querySelector("#ifarme_id").contentWindow.addEventListener('resize', () => {
console.log('size Change!');
}, false)3. Call
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>DIV width and height monitoring</title>
<style type="text/css">
#content {
overflow:auto;
}
</style>
</head>
<body>
<div id="content">
Zhong Nanshan: If Africa takes good precautions, the epidemic will decrease when the weather is hot. In addition, a foreigner asked at the meeting: If you go to Africa now, what would you do first?
Zhong Nanshan said: What we need to do now is protection, and preventing the spread is the most important thing.
In Africa, if good prevention is taken during this period, the epidemic situation may decline when the weather gets hot.
</div>
<button id="change-size">Change width and height</button>
<script type="text/javascript">
var eleResize = new ElementResize('#content');
eleResize.listen(function() {
console.log('size change!')
})
//Change width and height document.querySelector('#change-size').addEventListener('click', function() {
let cont = document.querySelector('#content');
cont.style.width = Math.floor((Math.random() * (document.documentElement.clientWidth - 500)) + 500) + 'px';
cont.style.height = Math.floor(Math.random() * 300) + 'px';
}, false)
</script>
</body>
</html>Complete code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>DIV width and height monitoring</title>
<style type="text/css">
#content {
overflow:auto;
}
</style>
</head>
<body>
<div id="content">
Zhong Nanshan: If Africa takes good precautions, the epidemic will decrease when the weather is hot. In addition, a foreigner asked at the meeting: If you go to Africa now, what would you do first?
Zhong Nanshan said: What we need to do now is protection, and preventing the spread is the most important thing.
In Africa, if good prevention is taken during this period, the epidemic situation may decline when the weather gets hot.
</div>
<button id="change-size">Change width and height</button>
<script type="text/javascript">
(function() {
let self = this;
/**
* Element width and height monitoring * @param {Object} el monitoring element selector */
function ElementResize(eleSelector) {
if (!(this instanceof ElementResize)) return;
if (!eleSelector) return;
this.eleSelector = eleSelector;
this.el = document.querySelector(eleSelector);
this.queue = [];
this.__init(); //globel init
}
// Initialization ElementResize.prototype.__init = function() {
let iframe = this.crateIElement();
this.el.style.position = 'relative';
this.el.appendChild(iframe)
this.bindEvent(iframe.contentWindow);
}
/**
* Set element style * @param {HTMLObject} el
* @param {Object} styleJson
*/
ElementResize.prototype.setStyle = function(el, styleJson) {
if (!el) return;
styleJson = styleJson || {
opacity: 0,
'z-index': '-1111',
position: 'absolute',
left: 0,
top: 0,
width: '100%',
height: '100%',
};
let styleText = '';
for (key in styleJson) {
styleText += (key + ':' + styleJson[key] + ';');
}
el.style.cssText = styleText;
}
/**
* Create element * @param {Object} style
*/
ElementResize.prototype.crateIElement = function(style) {
let iframe = document.createElement('iframe');
this.setStyle(iframe);
return iframe;
}
/**
* Binding event * @param {Object} el
*/
ElementResize.prototype.bindEvent = function(el) {
if (!el) return;
var _self = this;
el.addEventListener('resize', function() {
_self.runQueue();
}, false)
}
/**
* Run queue */
ElementResize.prototype.runQueue = function() {
let queue = this.queue;
for (var i = 0; i < queue.length; i++) {
(typeof queue[i]) === 'function' && queue[i].apply(this);
}
}
/**
* External monitoring * @param {Object} cb callback function */
ElementResize.prototype.listen = function(cb) {
if (typeof cb !== 'function') throw new TypeError('cb is not a function!');
this.queue.push(cb);
}
self.ElementResize = ElementResize;
})()
//Create a listening instance var eleResize = new ElementResize('#content');
eleResize.listen(function() {
console.log('I am a listener')
})
//Switch width and height document.querySelector('#change-size').addEventListener('click', function() {
let cont = document.querySelector('#content');
cont.style.width = Math.floor((Math.random() * (document.documentElement.clientWidth - 500)) + 500) + 'px';
cont.style.height = Math.floor(Math.random() * 300) + 'px';
}, false)
</script>
</body>
</html>More features are being updated... This is the end of this article about monitoring the size changes of a DOM element through iframe. For more relevant DOM element changes, please search 123WORDPRESS.COM’s previous articles or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future! |
<<: Several common redirection connection example codes in html
>>: Solve the problem of data synchronization when vue-seamless-scroll scrolls and likes
Recommend
ThingJS particle effects to achieve rain and snow effects with one click
Table of contents 1. Particle Effects 2. Load the...
How to set horizontal navigation structure in Html
This article shares with you two methods of setti...
Ways to improve MongoDB performance
MongoDB is a high-performance database, but in th...
Design of pop-up windows and floating layers in web design
In the trend of gradual transition from tradition...
The background color or image inside the div container grows as it grows
Copy code The code is as follows: height:auto !im...
Use href to simply click on a link to jump to a specified place on the page
After clicking the a tag in the page, you want to ...
Example code for implementing triangles and arrows through CSS borders
1. CSS Box Model The box includes: margin, border...
Summary of various methods for Vue to achieve dynamic styles
Table of contents 1. Ternary operator judgment 2....
How to use Nginx to realize the coexistence of multiple containers in the server
background There is a Tencent Linux cloud host, o...
Use semantic tags to write your HTML compatible with IE6,7,8
HTML5 adds more semantic tags, such as header, fo...
Detailed explanation of the deep and shallow cloning principles of JavaScript arrays and non-array objects
Table of contents What are shallow cloning and de...
Token verification login in Vue project (front-end part)
This article example shares the specific code of ...
Getting Started with Vue 3.0 Custom Directives
Table of contents 1. Custom instructions 1. Regis...
Centos6.5 glibc upgrade process introduction
Table of contents Scenario Requirements glibc ver...
Learn MySQL execution plan
Table of contents 1. Introduction to the Implemen...