উত্তর:
যেখানে সম্ভব, আমি কোনও অনুষ্ঠান প্রেরণের চেয়ে ফাংশনটিতে কল করতে পছন্দ করি। আপনি যে কোডটি চালাতে চান তার উপর যদি নিয়ন্ত্রণ থাকে তবে এটি ভাল কাজ করে তবে কোডগুলির মালিকানা নেই এমন ক্ষেত্রে নীচে দেখুন।
window.onresize = doALoadOfStuff;
function doALoadOfStuff() {
//do a load of stuff
}এই উদাহরণে, আপনি doALoadOfStuffকোনও অনুষ্ঠান প্রেরণ না করেই ফাংশনটি কল করতে পারেন ।
আপনার আধুনিক ব্রাউজারগুলিতে, আপনি ইভেন্টটি ব্যবহার করে ট্রিগার করতে পারেন :
window.dispatchEvent(new Event('resize'));এটি ইন্টারনেট এক্সপ্লোরারে কাজ করে না, যেখানে আপনাকে লংহ্যান্ড করতে হবে:
var resizeEvent = window.document.createEvent('UIEvents');
resizeEvent.initUIEvent('resize', true, false, window, 0);
window.dispatchEvent(resizeEvent);jQuery এর triggerপদ্ধতি রয়েছে , যা এ জাতীয়ভাবে কাজ করে:
$(window).trigger('resize');এবং সতর্কতা আছে:
যদিও .trigger () কোনও ইভেন্ট অ্যাক্টিভেশনকে সিমুলেট করে, সংশ্লেষিত ইভেন্ট অবজেক্টের সাথে সম্পূর্ণ, এটি কোনও প্রাকৃতিকভাবে ঘটে যাওয়া ইভেন্টটির পুরোপুরি প্রতিলিপি দেয় না।
আপনি নির্দিষ্ট উপাদানগুলিতে ইভেন্টগুলিও অনুকরণ করতে পারেন ...
function simulateClick(id) {
var event = new MouseEvent('click', {
'view': window,
'bubbles': true,
'cancelable': true
});
var elem = document.getElementById(id);
return elem.dispatchEvent(event);
}window.dispatchEvent(new Event('resize'));triggerআসলে নেটিভ "আকার পরিবর্তন" ইভেন্টটি ট্রিগার করে না। এটি কেবল ইভেন্ট শ্রোতাদের ট্রিগার করে যা jQuery ব্যবহার করে যুক্ত করা হয়েছে। আমার ক্ষেত্রে, একটি তৃতীয় পক্ষের লাইব্রেরি সরাসরি নেটিভ "রিসাইজ" ইভেন্টটি শুনছিল এবং এটিই আমার জন্য কার্যকর সমাধান।
window.fireEvent)
JQuery এর সাহায্যে, আপনি ট্রিগার কল করার চেষ্টা করতে পারেন :
$(window).trigger('resize');window.dispatchEvent(new Event('resize'));করেছে
একটি খাঁটি জেএস যা আইইতেও কাজ করে ( @ ম্যানফ্রেড মন্তব্য থেকে )
var evt = window.document.createEvent('UIEvents');
evt.initUIEvent('resize', true, false, window, 0);
window.dispatchEvent(evt);বা কৌণিক জন্য:
$timeout(function() {
var evt = $window.document.createEvent('UIEvents');
evt.initUIEvent('resize', true, false, $window, 0);
$window.dispatchEvent(evt);
});Do not use this method anymore as it is deprecated.
new Event()পদ্ধতিটি সমর্থন করে না । আমি মনে করি পুরানো ব্রাউজারগুলির বিরুদ্ধে হ্যাক হিসাবে আপনি এরকম কিছু করতে পারেন if (Event.prototype.initEvent) { /* deprecated method */ } else { /* current method */ }। যেখানে বর্তমান পদ্ধতিটি অ্যাভেটিস্কের উত্তর ।
সমস্ত ব্রাউজারগুলি কভার করার জন্য পম্পার এবং অ্যাভিটিস্কের উত্তরগুলির সংমিশ্রণ এবং সতর্কতা সৃষ্টি না করা:
if (typeof(Event) === 'function') {
// modern browsers
window.dispatchEvent(new Event('resize'));
} else {
// for IE and other old browsers
// causes deprecation warning on modern browsers
var evt = window.document.createEvent('UIEvents');
evt.initUIEvent('resize', true, false, window, 0);
window.dispatchEvent(evt);
}উপরের যে কোনও সমাধানের সাথে আমি এটি কাজ করতে সক্ষম হয়ে উঠিনি। আমি একবার ইভেন্টটিকে jQuery এর সাথে আবদ্ধ করে নিলাম তখন এটি নীচের মতো দুর্দান্ত কাজ করেছে:
$(window).bind('resize', function () {
resizeElements();
}).trigger('resize');মাত্র
$(window).resize();আমি যা ব্যবহার করি তা যদি না হয় ... যদি না আপনি যা চাইছেন তা ভুল বুঝে না।
আরএক্সজেএস-এর সাথে প্রতিক্রিয়া
কৌণিক কিছু বলুন
size$: Observable<number> = fromEvent(window, 'resize').pipe(
debounceTime(250),
throttleTime(300),
mergeMap(() => of(document.body.clientHeight)),
distinctUntilChanged(),
startWith(document.body.clientHeight),
);যদি ম্যানুয়াল সাবস্ক্রিপশন পছন্দ হয় (বা কৌনিক নয়)
this.size$.subscribe((g) => {
console.log('clientHeight', g);
})যেহেতু আমার অন্তর্নিহিত সূচনার মানটি ভুল হতে পারে (সংশোধনের জন্য প্রেরণ)
window.dispatchEvent(new Event('resize'));কৌণিক বলতে (আমি পারতাম ..)
<div class="iframe-container" [style.height.px]="size$ | async" >..আমি বিশ্বাস করি এটি সমস্ত ব্রাউজারের জন্য কাজ করা উচিত:
var event;
if (typeof (Event) === 'function') {
event = new Event('resize');
} else { /*IE*/
event = document.createEvent('Event');
event.initEvent('resize', true, true);
}
window.dispatchEvent(event);আপনি এই লাইব্রেরি দিয়ে এটি করতে পারেন। https://github.com/itmor/events-js
const events = new Events();
events.add({
blockIsHidden: () => {
if ($('div').css('display') === 'none') return true;
}
});
function printText () {
console.log('The block has become hidden!');
}
events.on('blockIsHidden', printText);window.resizeBy()উইন্ডোর অনারাইজ ইভেন্টটি ট্রিগার করবে। এটি জাভাস্ক্রিপ্ট বা ভিবিএস স্ক্রিপ্ট উভয় ক্ষেত্রেই কাজ করে ।
window.resizeBy(xDelta, yDelta)window.resizeBy(-200, -200)পৃষ্ঠা 200px দ্বারা 200px সঙ্কুচিত করতে বলা হয়।