যেহেতু এই প্রশ্নটি 2019 সালে স্ট্যাকওভারফ্লোতে প্রদর্শিত হয়েছিল, তাই আমি আরও আধুনিক জাভাস্ক্রিপ্ট ব্যবহার করে আমার অবদান যুক্ত করতে চাই।
বিশেষত, সিএসএস স্টাইলশিটের জন্য যা ইনলাইন নয় - যেহেতু এটি ইতিমধ্যে কোনওভাবেই মূল প্রশ্নটি থেকে আচ্ছাদিত।
প্রথমত, লক্ষ্য করুন যে আমাদের কাছে এখনও কনস্ট্রাকটেবল স্টাইলশিট অবজেক্ট নেই। তবে আমরা শীঘ্রই এগুলি অবতরণ করার আশা করি।
ইতিমধ্যে, নিম্নলিখিত এইচটিএমএল সামগ্রী অনুমান করে:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link id="theme" rel="stylesheet" type="text/css" href="./index.css" />
<script src="./index.js"></script>
</head>
<body>
<p>Hello World</p>
<button onclick="reload('theme')">Reload</button>
</body>
</html>
আমাদের থাকতে পারে index.js:
const load = target =>
new Promise((rs, rj) => {
target.addEventListener("load", rs, { once: true });
target.addEventListener(
"error",
rj.bind(null, `Can't load ${target.href}`),
{ once: true }
);
});
async function reload(id) {
const link = document.getElementById(id);
if (!link || !link.href) {
throw new Error(`Can't reload '${id}', element or href attribute missing.`);
}
let response = await fetch(link.href, { cache: "reload" });
let url = await URL.createObjectURL(await response.blob());
let updated = document.querySelector(`[data-link-id=${id}]`);
if (!updated) {
updated = document.createElement("link");
updated.rel = "stylesheet";
updated.type = "text/css";
updated.dataset.linkId = id;
link.parentElement.insertBefore(updated, link);
link.disabled = true;
}
updated.href = url;
await load(updated);
URL.revokeObjectURL(url);
}
