بارگذاری Website درون IFrame توسط JQUERY

در این مقاله به زبان ساده نحوه بارگذاری Website درون IFrame توسط JQUERY را یاد خواهید گرفت. عبارت iframe مخفف inline frame بوده و یکی از تگ های HTML می باشد که برای نمایش یک صفحه از اینترنت در بخشی از سایت شما استفاده میشود.

 بارگذاری Website درون IFrame توسط JQUERY

iframe مخفف inline frame بوده و یکی از تگ های HTML می باشد که برای نمایش یک صفحه از اینترنت در بخشی از سایت شما استفاده می شود. در سال 2008 برخی از اسپمرها با استفاده از iframe صفحات و محتوای دلخواه خود را در درون صفحاتی با موضوعات نامرتبط به نمایش می گذاشتند و به این طریق موتورهای جستجو را فریب می دانند، همین امر موجب شد تا موتور جستجوی گوگل حضور iframe در یک صفحه را بعنوان امتیازی منفی در نظر گرفته و اطمینان کمتری به صفحات شامل آی فریم داشته باشد. با این وجود همچنان سایت های زیادی با استفاده از این روش بازدیدکنندگان را از موتورهای جستجو جذب می کنند.

زمینه

در اینجا به زبان ساده نحوه بارگذاری Website درون IFrame توسط JQUERY را یاد خواهید گرفت. کافی است آدرس url سایت مورد نظر خود را در خاصیت src تگ IFrame قرار دهید.

استفاده از کد

برای شروع کافی است JQUERY را فراخوانی کنید.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

سپس تعدادی المنت برای UI (رابط کاربر) مطابق کد زیر می سازیم.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>مرجع تخصصی برنامه نویسان</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> 
    <link href="StyleSheet1.css" rel="stylesheet" />
</head>
<body>
<h3>
    <a href="http://www.Barnamenevisan.org">مرجع تخصصی برنامه نویسان</a>
</h3>
<p id="loadMe">بارگذاری</p>
<b>بارگذاری وبسایت در این قسمت</b>
<iframe id="load" src=""></iframe>
</body> 
</html>

سپس المنت های استفاده شده را با CSS مطابق کد زیر استایل می دهیم.

#load {
    position: absolute;
    background-color: blue;
    color: #fff;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    width: 100%;
    height: 100%;
    display: none;
}

#loadMe {
    background-color: blue;
    color: #fff;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    width: 80px;
    height: 30px;
    cursor: pointer;
}

اسکریپت زیر را کپی کنید.

<script>
    $(document).ready(function () {
        $('#loadMe').click(function (e) {
            $('#load').show();
            $("#load").attr("src", "http://www.sibeeshpassion.com/");
        });
    });
</script>   

جالبی IFrame در آن است که هر زمان src را تغییر می دهیم آن وبسایت بارگذاری می شود.

فایل های ضمیمه