JavaScript-এ কাস্টম URL দিয়ে HTML ডকুমেন্ট তৈরি করা

JavaScript-এ document.implementation.createHTMLDocument() ব্যবহার করে নতুন HTML ডকুমেন্ট তৈরি করা এবং সেটাতে কাস্টম বেস URL সেট করা যায়। এটি ডাইনামিক ডকুমেন্ট জেনারেশনে কাজে লাগে।

সিনট্যাক্স

const doc = document.implementation.createHTMLDocument();
const base = doc.createElement('base');
base.href = "https://example.com/path/";
doc.head.append(base);

পূর্ণ উদাহরণ

<!DOCTYPE html>
<html lang="bn">
<head>
    <meta charset="UTF-8">
    <title>Create HTML Document</title>
</head>
<body>
    <script>
        // ১. নতুন HTML ডকুমেন্ট তৈরি
        const htmlDoc = document.implementation.createHTMLDocument();
        
        // ২. কাস্টম বেস URL সেট
        const baseUrl = htmlDoc.createElement('base');
        baseUrl.href = "https://www.tutorialspoint.com/java/index.htm";
        htmlDoc.head.append(baseUrl);
        console.log("বেস URL: " + baseUrl.href);
        
        // ৩. রিলেটিভ লিংক থেকে অ্যাবসোলিউট URL বানানো
        const link = htmlDoc.createElement("a");
        link.href = "../java/java_questions_answers.html";
        htmlDoc.body.append(link);
        console.log("রেজোল্ভড URL: " + link.href);
    </script>
</body>
</html>

চলানোর পদ্ধতি

1. ফাইলটি createDoc.html নামে সংরক্ষণ করুন।
2. VS Code-এ Open with Live Server দিয়ে চালান।
3. কনসোল (F12) দেখুন।

আউটপুট (কনসোল)

বেস URL: https://www.tutorialspoint.com/java/index.htm
রেজোল্ভড URL: https://www.tutorialspoint.com/java/java_questions_answers.html

কীভাবে কাজ করে

• createHTMLDocument() - নতুন খালি ডকুমেন্ট তৈরি করে।
• <base> ট্যাগ - সেটার `href` সেট করলে সেটার ভেতরের সব রিলেটিভ URL সেটা রেজোল্ভ হয়।
• <a> এলিমেন্ট ডকুমেন্টে যোগ করলে তার `href` প্রপার্টি অটোমেটিক্যালি রেজোল্ভ হয়।

ব্যবহার ক্ষেত্র

• ডাইনামিক টেমপ্লেট রেন্ডারিং
• ইমেইল টেমপ্লেট প্রিভিউ
• PDF জেনারেশন (puppeteer-এর সাথে)
• অফলাইন কন্টেন্ট প্যাকেজিং

দ্রষ্টব্য

• এই ডকুমেন্ট ব্রাউজারের মেইন ডকুমেন্ট থেকে আলাদা।
• এতে স্ক্রিপ্ট এক্সিকিউশন নয় (শুধু DOM ম্যানিপুলেশন)।
• সিকিউরিটি: ক্রস-অরিজিন রিসোর্স লোড ব্লক হতে পারে।