آی فریم چیست؟ چگونه محتوا را با آی‌فریم‌ها جاسازی کنیم؟

آی‌فریم چیست؟

آی‌فریم (iframe) که مخفف «قاب درون‌خطی» است، یک عنصر HTML پرکاربرد است که به شما امکان می‌دهد یک سند HTML دیگر را در صفحه فعلی جاسازی کنید. به عبارت دیگر، مانند یک پنجره در صفحه وب شماست که می‌توانید محتوا را از منبع دیگری نمایش دهید.

این ممکن است کمی انتزاعی به نظر برسد، بنابراین بیایید به چند مثال در دنیای واقعی نگاهی بیندازیم. تصور کنید که یک وب‌سایت دارید و می‌خواهید یک ویدیوی یوتیوب، یک نقشه از نقشه‌های گوگل یا حتی فقط محتوایی از یک صفحه وب دیگر خود را نمایش دهید، بدون اینکه کاربر را به آن صفحه یا سایت دیگر هدایت کنید. آی‌فریم‌ها این امکان را فراهم می‌کنند. وقتی از صفحه‌ای با یک ویدیوی یوتیوب جاسازی شده بازدید می‌کنید، آن ویدیو احتمالاً در یک آی‌فریم نمایش داده می‌شود.

چرا از iframe استفاده کنیم؟

1. جداسازی: محتوای درون یک iframe در محیط خودش اجرا می‌شود. این به این معنی است که با استایل‌ها و اسکریپت‌های صفحه اصلی تداخلی ندارد. بنابراین، اگر محتوایی را از سایت دیگری جاسازی کنید، به طور تصادفی استایل یا عملکرد صفحه شما را به هم نمی‌ریزد.
2. انعطاف‌پذیری: آی‌فریم‌ها به شما امکان می‌دهند تقریباً هر محتوای وب را در صفحه خود نمایش دهید. شما محدود به ویدیوها یا نقشه‌ها نیستید؛ می‌تواند نظرسنجی‌ها، فرم‌های بازخورد، اخبار یا حتی بازی‌ها باشد.
3. به‌روزرسانی‌ها در لحظه: اگر محتوای منبع یک iframe به‌روزرسانی شود، این به‌روزرسانی‌ها بلافاصله در صفحه شما منعکس می‌شوند بدون اینکه نیازی به ایجاد هیچ تغییری داشته باشید. این امر به ویژه برای مواردی مانند شاخص‌های سهام یا فیدهای خبری مفید است.

نحو و کاربرد

سینتکس اولیه‌ی یک iframe سرراست است. در اینجا یک مثال ساده آورده شده است:

<iframe src=”https://www.example.com” width=”500″ height=”300″></iframe>

• src: آدرس اینترنتی (URL) محتوایی که می‌خواهید جاسازی کنید.
• عرض و ارتفاع: ابعاد iframe را مشخص می‌کند.

به یاد داشته باشید، اگرچه iframe ها می‌توانند فوق‌العاده مفید باشند، اما باید با احتیاط استفاده شوند. استفاده بیش از حد از iframe ها می‌تواند صفحه شما را کند کند یا یک تجربه کاربری نامرتبط ایجاد کند. مانند همه ابزارها، درک نقاط قوت و ضعف آن برای استفاده موثر بسیار مهم است.

ویژگی‌های آی‌فریم‌ها

آی‌فریم‌ها دارای ویژگی‌های متنوعی هستند که به توسعه‌دهندگان اجازه می‌دهد رفتار، ظاهر و عملکرد آنها را سفارشی کنند. درک این ویژگی‌ها برای استفاده مؤثر از آی‌فریم‌ها در پروژه‌های وب شما بسیار مهم است. بیایید به برخی از رایج‌ترین ویژگی‌ها نگاهی بیندازیم:

1. `src`:

– توضیحات: ویژگی `src` آدرس اینترنتی (URL) سندی را که قرار است در iframe جاسازی شود، مشخص می‌کند.

– مثال:

<iframe src=”https://www.example.com”></iframe>

2. «عرض» و «ارتفاع» :

توضیحات: این ویژگی‌ها اندازه iframe را بر حسب پیکسل یا درصدی از عنصر حاوی آن تعریف می‌کنند.

– مثال:

<iframe src=”https://www.example.com” width=”500″ height=”300″></iframe>

3. `نام` :

توضیحات: نامی را به اولین عنصر iframe اختصاص می‌دهد که می‌تواند به عنوان هدف برای لینک‌ها و فرم‌ها استفاده شود.

– مثال:

<iframe src=”https://www.example.com” name=”myiframe”></iframe>

<a href=”https://www.anotherexample.com” target=”myiframe”>Load in Iframe</a>

4. `حاشیه قاب` :

– توضیحات: تعیین می‌کند که آیا حاشیه‌ای در اطراف iframe نمایش داده شود یا خیر. مقادیر می‌توانند «۱» (نمایش حاشیه) یا «۰» (بدون حاشیه) باشند. توجه: این ویژگی در HTML5 پشتیبانی نمی‌شود و باید به جای آن از CSS استفاده شود.

– مثال:

<iframe src=”https://www.example.com” frameborder=”0″></iframe>

5. `پیمایش` :

– توضیحات: نحوه‌ی اسکرول کردن در iframe را تعریف می‌کند. می‌توان آن را روی «خودکار»، «بله» یا «خیر» تنظیم کرد.

– مثال:

<iframe src=”https://www.example.com” scrolling=”no”></iframe>

6. «جعبه شنی» :

– توضیحات: این ویژگی با محدود کردن اقداماتی که iframe می‌تواند انجام دهد، امنیت را افزایش می‌دهد. این ویژگی می‌تواند چندین مقدار، مانند «allow-forms»، «allow-scripts» و غیره، را بپذیرد که اقدامات مجاز را تعیین می‌کنند.

– مثال:

<iframe src=”https://www.example.com” sandbox=”allow-scripts allow-popups”></iframe>

7. `اجازه تمام صفحه` :

– توضیحات: مشخص می‌کند که مرورگر باید اجازه دهد iframe در حالت تمام صفحه مشاهده شود. نیازی به مقدار ندارد.

– مثال:

<iframe src=”https://www.youtube.com/embed/examplevideo” allowfullscreen></iframe>

8. `srcdoc` :

– توضیحات: به شما امکان می‌دهد محتوای HTML را مستقیماً درون ویژگی بنویسید، به این معنی که می‌توانید محتوا را بدون پیوند به یک صفحه خارجی جاسازی کنید.

– مثال:

<iframe srcdoc=”<p>This is embedded content right within the iframe attribute.</p>”></iframe>

9. «سیاست ارجاع» :

– توضیحات: تعیین می‌کند که هنگام دریافت محتوای iframe، کدام اطلاعات ارجاع‌دهنده باید ارسال شود. مقادیر ممکن شامل «no-referrer»، «origin»، «unsafe-url» و موارد دیگر است.

– مثال:

<iframe src=”https://www.example.com” referrerpolicy=”origin”></iframe>

به یاد داشته باشید، اگرچه ویژگی‌های بی‌شماری در دسترس هستند، اما ممکن است همه آنها برای هر مورد استفاده‌ای ضروری نباشند. ویژگی‌هایی را انتخاب کنید که به بهترین وجه با عملکرد و ظاهری که می‌خواهید به آن دست یابید، مطابقت داشته باشند و نگرانی‌های امنیتی بالقوه و بهترین شیوه‌ها را در نظر داشته باشید.

چگونه یک آی فریم بسازیم در وردپرس و سایت

ایجاد یک آی فریم در وردپرس و سایت ها یک فرآیند ساده است، اما درک ظرافت‌های جاسازی محتوا می‌تواند تجربه کاربری را بهینه کند. بیایید گام به گام پیش برویم:

1. ایجاد اولیه‌ی آی‌فریم:

با سینتکس پایه شروع کنید. در هسته خود، یک iframe فقط به ویژگی `src` برای عملکرد نیاز دارد.

<iframe src=”https://www.example.com”></iframe>

این کد یک iframe ایجاد می‌کند که محتوای « www.example.com » را نمایش می‌دهد.

2. اندازه سفارشی:

با استفاده از ویژگی‌های `width` و `height` می‌توانید اندازه iframe را تعریف کنید.

<iframe src=”https://www.example.com” width=”500″ height=”300″></iframe>

3. بهبود ظاهر:

برای یک iframe بدون حاشیه، می‌توانید از ویژگی `frameborder` استفاده کنید، اگرچه CSS برای استایل‌بندی در HTML مدرن توصیه می‌شود.

iframe { border: none; }

4. امنیت و محدودیت‌ها:

استفاده از ویژگی «sandbox» می‌تواند قابلیت‌های خاصی را برای محتوای درون iframe محدود کند و امنیت را افزایش دهد.

5. جاسازی محتوای مستقیم:

به جای لینک دادن به محتوای خارجی، ویژگی `srcdoc` به شما امکان می‌دهد محتوای HTML را مستقیماً جاسازی کنید.

به یاد داشته باشید که هنگام جاسازی محتوا از منابع خارجی همیشه محتاط باشید. مطمئن شوید که به منبع اعتماد دارید و از محتوایی که به کاربرانتان نمایش داده می‌شود، آگاه هستید.

رویدادها و ارتباطات Iframe

وقتی محتوایی را با iframe جاسازی کردید، ممکن است از خود بپرسید که چگونه با آن تعامل داشته باشید. iframeها و صفحات والد آنها می‌توانند به روش‌های مختلفی با هم ارتباط برقرار کنند:

1. گوش دادن به رویدادها:

شما می‌توانید مانند هر عنصر دیگری، به رویدادهای درون یک iframe گوش دهید. با این حال، محدودیت‌های بین دامنه‌ای می‌تواند این را محدود کند.

document.querySelector(‘iframe’).contentWindow.addEventListener(‘click’, function() {
alert(‘Iframe was clicked!’);
});

2. متد `postMessage`:

برای ارتباطات پیشرفته‌تر، به خصوص بین اسناد از دامنه‌های مختلف، متد `postMessage` بسیار ارزشمند است.

– والد به Iframe:

var iframeWin = document.querySelector(‘iframe’).contentWindow;
iframeWin.postMessage(‘Hello from the parent!’, ‘*’);

– تبدیل iframe به والد:

درون محتوای iframe:

window.parent.postMessage(‘Hello from the iframe!’, ‘*’);

3. گوش دادن به پیام‌ها:

چه در سند والد باشید و چه در iframe، می‌توانید به پیام‌های متن دیگر گوش دهید:

window.addEventListener(‘message’, function(event) {
if (event.origin !== ‘https://1.com’) return; // Always check the event’s origin!
console.log(‘Received message:’, event.data);
});

پیمایش DOM مربوط به Iframe:

اگر محتوای iframe از همان دامنه صفحه والد باشد، می‌توانید مستقیماً به DOM آن بروید

ارتباط بین iframe ها و اسناد والد آنها مجموعه ای غنی از قابلیت های تعاملی را فراهم می کند، اما همیشه مراقب پیامدهای امنیتی باشید، به خصوص هنگام مدیریت محتوا یا پیام ها از منابع غیرقابل اعتماد.

گوگل درباره آی‌فریم‌ها در سئو

جان مولر، تحلیلگر روندهای وب مستر در گوگل، چندین بار در مورد آیفریم‌ها توییت کرده است. در اینجا خلاصه‌ای از آنچه او گفته است آمده است:

• جاسازی iframe ها با noindex، صفحه شما را noindex نمی‌کند. توجه به این نکته مهم است، زیرا بسیاری از افراد به اشتباه معتقدند که جاسازی iframe با برچسب meta noindex، صفحه‌ای را که حاوی iframe است نیز noindex می‌کند. اما اینطور نیست.
• گوگل می‌تواند iframe ها را کراول و ایندکس کند، اما ممکن است همیشه این کار را نکند. دلیل این امر این است که گوگل از عوامل مختلفی برای تصمیم‌گیری در مورد اینکه کدام صفحات را کراول و ایندکس کند استفاده می‌کند و iframe ها تنها یکی از این عوامل هستند. اگر می‌خواهید مطمئن شوید که گوگل یک iframe را کراول و ایندکس می‌کند، می‌توانید از تگ robots جدید indexifembedded استفاده کنید.
• جاسازی توییت‌ها با تنظیمات معمول کمی آزاردهنده است. دلیلش این است که شما باید از جاوا اسکریپت توییتر استفاده کنید که رندر محتوا کمی طول می‌کشد و همچنین می‌تواند نگرانی‌هایی در مورد حریم خصوصی ایجاد کند. مولر روش ساده‌تری برای جاسازی توییت‌ها به عنوان تصویر با استفاده از پیش‌پردازنده و کدهای کوتاه هوگو به اشتراک گذاشته است.

توییتر اجازه جاسازی توییت‌ها از طریق iframe را نمی‌دهد، بنابراین توصیه مولر در مورد جاسازی توییت‌ها مستقیماً در مورد توییتر قابل اجرا نیست. با این حال، توصیه کلی او در مورد جاسازی iframeها هنوز هم مرتبط است.

علاوه بر موارد فوق، مولر در مورد موضوعات مرتبط با iframe زیر نیز توییت کرده است:

• گوگل می‌تواند با iframe ها طوری رفتار کند که انگار بخشی از صفحه‌ای هستند که آنها را در خود جای داده است. این بدان معناست که محتوای یک iframe می‌تواند در نتایج جستجو رتبه‌بندی شود و همچنین می‌تواند بر رتبه‌بندی کلی صفحه‌ای که آن را در بر دارد تأثیر بگذارد.
• گوگل ممکن است نتواند iframe هایی را که در دامنه دیگری قرار دارند، کراول و ایندکس کند. دلیل این امر این است که گوگل برای کراول و ایندکس کردن iframe باید بتواند به دامنه آن دسترسی داشته باشد.
• اگر از iframe برای جاسازی محتوا از دامنه دیگری استفاده می‌کنید، باید مطمئن شوید که محتوا با کیفیت بالا و مرتبط با صفحه شما باشد. همچنین باید مطمئن شوید که محتوا توسط robots.txt یا سایر محدودیت‌های دسترسی مسدود نشده باشد.

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

نتیجه‌گیری

آی‌فریم‌ها در طول زمان امتحان خود را پس داده‌اند و کاربرد خود را در دنیای پویای توسعه وب ثابت کرده‌اند. آن‌ها روشی یکپارچه برای ادغام محتوای خارجی، چه چندرسانه‌ای، ویجت‌ها یا قابلیت‌های شخص ثالث، ارائه می‌دهند. با این حال، مانند هر ابزاری، آن‌ها با مجموعه‌ای از چالش‌های خود همراه هستند. دسترسی، امنیت و تجربه کاربری باید همیشه در اولویت ملاحظات هنگام استفاده از آی‌فریم‌ها باشند. با آگاهی و هوشیاری، توسعه‌دهندگان می‌توانند از قدرت آی‌فریم‌ها بهره ببرند و در عین حال مشکلات احتمالی را به حداقل برسانند و یک تجربه وب قوی و فراگیر را برای همه کاربران تضمین کنند. چه یک توسعه‌دهنده باتجربه باشید و چه تازه کار، درک ظرافت‌های آی‌فریم‌ها می‌تواند تفاوت قابل توجهی در اثربخشی پروژه‌های وب شما ایجاد کند.