15
تشکر

مقدمه‌ای بر Imports در HTML

Html Imports

Html Imports

HTML Imports تکنولوژی جدیدی است که میتواند نحوه ساخت سایتها را به نحوی تغییر دهد. در‌ واقع با استفاده از Imports میتوانید فایل‌های HTML را درون فایلهای دیگر فراخوانی (Import) کنید. اینکار چند مزیت دارد، که شامل قابلیت ساخت مجموعه‌ای از کدهای HTML, CSS و JavaScript که میتواند بین اپلیکیشن شما در اشتراک باشد و یا حتی میتواند درون وب به اشتراک گذاشته شود.

در حالی که این امکان نیز وجود دارد که با استفاده از AJAX، عملیات Imports را در JavaScript به صورت تمیزتری انجام داد.

در ادامه این مطلب میخواهیم این ویژگی را با ویژگی Template در HTML که قبلاً معرفی کردیم ترکیب کنیم.

استفاده از HTML Imports

فعلاً مرورگرهای کمی از این ویژگی پشتیبانی میکنند. مرورگر Chrome از نسخه 31 از این ویژگی پشتیبانی میکند، اما فعال نیست. برای فعال کردن آن به صفحه chrome://flags بروید و گزینه Enable HTML Imports را فعال کنید و مرورگر خود را Relaunch کنید.

استفاده از Imports خیلی ساده است و با استفاده از تگ link انجام میشود. توجه کنید که خاصیت rel باید import باشد.

<head>
  <link rel="import" href="/path/to/template.html">
</head>

استفاده از Templates با HTML Imports

خب حالا که با نحوه کار Imports آشنا شدید در ادامه مطلب میخواهیم با استفاده از این ویژگی و همینطور ویژگی Template، محتوای وب خودمان را به صورت داینامیک لود کنیم.

توجه داشته باشید که HTML Imports مانند include در PHP کار نمیکند. HTML Imports محتوای فایل Import را لود میکند اما آن را به صفحه متصل نمی کند و ما اینکار را باید با استفاده از JavaScript انجام دهیم. که البته این حرف فقط در مورد محتوای HTML صحیح است و هر کد CSS و JavaScript پس از لود شدن به صورت خودکار به صفحه اعمال میشوند.

با استفاده مشخصه import در JavaScript به صورت زیر میتوانید به محتوای فایل Import شده دسترسی داشته باشیم.

var content = document.getElementById('myLinkElement').import;

خوب ما میخواهیم آخرین پست های یک وبلاگ را نمایش دهیم. بنابراین template زیر را درون فایلی که میخواهیم Import کنیم قرار میدهیم.

<template id="blog-post">
  <div class="post">
    <h2 class="post-title"><a href=""></a></h2>
    <p class="post-content"></p>
  </div>
</template>

حالا فایل بالا را به صفحه متصل میکنیم.

<head>
  <link rel="import" href="templates.html" id="templates">
</head>

همانطور که در کد بالا میبینید ما یک id هم به تگ link دادیم. حالا تگ زیر را نیز درون فایل اصلی برای نمایش پست ها ایجاد میکنیم.

<div id="blog-posts"></div>

در مرحله بعدی باید اطلاعاتی که میخواهیم نمایش دهیم را ایجاد کنیم. ما برای راحتی کار این اطلاعات را درون خود فایل قرار میدهیم اما شما میتوانید با استفاده از AJAX آن‌ها را لود کنید.

<script>
  var blogPosts = [
    {
      "title": "Title1",
      "content": "Content1",
      "url": "http://example.com"
    },
    {
      "title": "Title2",
      "content": "Content2",
      "url": "http://example.com"
    },
    {
      "title": "Title3",
      "content": "Content3",
      "url": "http://example.com"
    }
  ];

  // TODO: Add the rest of the code here...
</script>

اطلاعات ما دارای سه بخش به نام های title, content و url است. خب حالا که همه چیز را داریم باید اطلاعات را نمایش دهیم.

خب ابتدا تگ link را میگیریم و سپس با استفاده از مشخصه import محتویات آن را دریافت میکنیم و سپس از محتویات آن تگ template با آی دی blog-post را انتخاب میکنیم.

var templatesImport = document.getElementById('templates').import;
var template = templatesImport.getElementById('blog-post');

حالا که تگ template را داریم با استفاده از یک for اطلاعات را در مکان خود جایگذاری میکنیم.

for (i in blogPosts) {
  // Get the current post.
  var post = blogPosts[i];

}

همچنین کدهای زیر را درون دستور for قرار میدهیم.

var clone = document.importNode(template.content, true);
clone.querySelector('.post-title a').innerText = post['title'];
clone.querySelector('.post-title a').href = post['url'];
clone.querySelector('.post-content').innerText = post['content'];

document.getElementById('blog-posts').appendChild(clone);

در کدهای بالا در خط اول ما یک نمونه از template میسازیم و در سه خط بعدی آن اطلاعات را در نمونه گرفته شده جایگزین میکنیم و در خط آخر آن را به صفحه اضافه میکنیم.

کار تمام شد. حالا شما با استفاده از این دو ویژگی میتوانید به راحتی صفحات داینامیک بسازید.

این نمونه را میتوانید در اینجا مشاهده کنید.

رویدادهای Import

Import دو رویداد onload و onerror دارد که به صورت زیر قابل استفاده است.

<script>
  // Handle Loaded Templates.
  function templatesLoaded(event) {
    console.log('Templates loaded.');
  }

  // Handle Errors.
  function templatesFailed(event) {
    console.log('Templates could not be loaded.');
  }
</script>
<link rel="import" href="templates.html" onload="templatesLoaded(event)" onerror="templatesFailed(event)">

ساخت Import به صورت داینامیک

توسط کد زیر میتوانید یک Import به صورت داینامیک بسازید.

var link = document.createElement('link');
link.rel = 'import';
link.href = 'file.html'
link.onload = function(e) {...};
link.onerror = function(e) {...};
document.head.appendChild(link);

پشتیبانی مرورگرها

برای شناسایی پشتیبانی مرورگرها میتوانید از کد زیر استفاده کنید. همچنین میتوانید از کتابخانه HTMLImports در صورت پشتیبانی نشدن این ویژگی توسط مرورگر استفاده کنید.

if ('import' in document.createElement('link')) {
  // HTML imports are supported!
} else {
  // HTML imports are not supported.
}
  • مهدی می‌گه:

    ُسلام من یه سوال دارم اگه میشه جواب بدید: یه iframe توی صفحه قرار دادم و با دستور زیر :
    document.getElementById(‘blogfashow’).contentWindow.document.links
    خواستم لینک های درون این iframe که ایدی اون رو blogfashow قرار دادم جمع اوری کنم ولی اخطار میده مینویسه access denied یعنی نمیتونم به اطلاعات درون فریم دسترسی داشته باشم , خب پس الان این دستور contentWindow و یا contentDocument برا چی هست؟ من الان برای جمع اوری لینک های درون یک فریم چیکار کنم؟؟؟


  • نظرات این مطلب بسته است.