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
Differences between ES6 inheritance and ES5 inheritance in js
Table of contents Inheritance ES5 prototype inher...
js to achieve waterfall flow layout (infinite loading)
This article example shares the specific code of ...
Solve the problem that the docker container cannot ping the external network
Today, when I was building a redis environment in...
How to use IDEA to configure tomcat and create JSP files
Before using idea to write JSP files, you need to...
【HTML element】Detailed explanation of tag text
1. Use basic text elements to mark up content Fir...
Simple use of Vue vee-validate plug-in
Table of contents 1. Installation 2. Import 3. De...
Detailed explanation of COLLATION examples in MySQL that you may have overlooked
Preface The string types of MySQL database are CH...
MySQL sharding details
1. Business scenario introduction Suppose there i...
Detailed explanation of Angular component life cycle (I)
Table of contents Overview 1. Hook calling order ...
A brief discussion on the specific use of viewport in mobile terminals
Table of contents 1. Basic Concepts 1.1 Two kinds...
How to create components in React
Table of contents Preface Component Introduction ...
Linux series of commonly used operation and maintenance commands (summary)
Table of contents 1. System monitoring 2. File Op...
HTML page header code is completely clear
All the following codes are between <head>.....
Detailed explanation of the EXPLAIN command and its usage in MySQL
1. Scenario description: My colleague taught me h...
How to customize more beautiful link prompt effect with CSS
Suggestion: Handwriting code as much as possible c...