ما هي الاختلافات بين استخدام IFRAME و AJAX لتضمين محتويات صفحة خارجية؟

StackOverflow https://stackoverflow.com/questions/382662

  •  23-08-2019
  •  | 
  •  

سؤال

لقد كنت أقرأ ذلك، ويبدو أنه إذا كنت تستخدم AJAX، فيمكنك فقط إحضار المحتوى الموجود في نفس المجال بينما مع iFrame يمكنك إحضار المحتوى من أي مجال. هل هذا هو الحال؟ ما هي الاختلافات الأخرى هناك؟

هل كانت مفيدة؟

المحلول

ضع في اعتبارك أنهم اثنين من التقنيات منفصلة تماما.

يقوم إطار (I) حقا بتحميل صفحة HTML كاملة في المنطقة في المتصفح. ما إذا كانت الصفحة على نفس المجال أو مجال آخر، للعرض النقي، لا يهم.

يصف Ajax فقط نظام لتسهيل JavaScript للتحدث مع (ومع تقييد الأمان الحالي عبر المستعرض، فقط مع) الخادم الذي تقوم فيه بتوثيق ما قمت بإنشاء مكالمة JavaScript من.

الأحمال تقنية الإطار (1) وتعرض صفحة HTML كاملة من أي عنوان URL معين. لا تزال هناك بعض القيود الأمنية التي تصل إلى مستندات أخرى من مجالات أخرى مع جافا سكريبت.

مع AJAX، من المفترض فقط استخدام JavaScript بحتة للتحدث إلى الخادم الأصلي (إرسال بعض البيانات) وعادة ما تحصل على بعض البيانات. في جافا سكريبت. ما هي هذه البيانات وماذا تفعل معها، الأمر متروك لك. سواء قمت بإدراجها في DOM (نموذج كائن المستند)، فإن أجزاء Exchange أو تحميل صفحة جديدة متروك لك.

إلى حد ما لديك كل الحرية التي تريدها. يمكنك الحصول على إطار (i) على صفحة، لا يزال بإجراء مكالمة AJAX وتقرر تحميل عنوان URL آخر في الإطار (I). أو استخدم قيمة إرجاع AJAX لإنشاء HTML NEW HTML بشكل ديناميكي داخل الإطار (I). أو خارج، في وثيقة أخرى.

يطلق على القيود الأمنية المتقدمين في هذه الحالة "سياسة المنشأ نفسها".

نصائح أخرى

بكل بساطة، يكون iFrame مثل إطار منتظم، لكنه لا ينقسم نافذة المتصفح في أقسام، فهو يقع على حق داخل صفحة وتتأثر ب Scrollbar.

من ناحية أخرى، يستخدم AJAX، من ناحية أخرى، JavaScript للقيام بأحمال جزئية من الصفحة، مما يسمح بتحميل كميات صغيرة من البيانات من الخادم دون الحاجة إلى إعادة النشر الكامل. على سبيل المثال.

إلى جانب هذه الاختلافات المذكورة من قبل الآخرين، هناك آخرون كذلك. يتم تحميل iFrame صفحة HTML / PHP بأكملها، سواء كان ذلك من الخادم الخاص أو خادم خارجي آخر. عادة، لديه طازج <html>, <head> و <body> علامة كذلك. Ajax تحميل فقط جزء من صفحة HTML / PHP.

علاوة على ذلك، يقوم AJAX بسحب CSS (وربما، حتى رموز JavaScript) من الملف الأصل، ولكن في حالة IFRAME، لا يمكن سحب نفسه.

على سبيل المثال هذا هو ترميز الملف الرئيسي.

<!doctype html>
<html>
<head>
<style>
    .gappu {background-color:black;color:red;}
</style>
<meta charset="utf-8">
    <script src="../AllJqueries/jquery-1.11.3.min.js"></script> <!-- Use your own jQuery file -->
    <script>
        <!--
        $(document).ready(function(){
            $.ajax({url:"slave1.php?bare=true", success:function(data){
                $(".myDomain").html(data);
            }});
        }); /* End of Main Jquery */
        //-->
    </script>
<title>Ajax vs Iframe</title>
</head>

<body>
    <div class="myDomain"></div>
    <div>Iframe below</div>
    <iframe width="100%" height="500px" src="slave1.php"></iframe>
</body>
</html>

الآن، لدينا أيضا ملف آخر، اسمه باسم slave1.php

<?php
if(isset($_GET['bare'])) $bare = $_GET['bare'];
else $bare = false;
if(!$bare):
?>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
    .gappu {background-color:blue;color:yellow;}
</style>
<!-- You can remove the above style later, and see the difference. The parent style will not apply for iframe -->
<title>Inside the Iframe</title>
</head>

<body>
<?php endif; ?>
    <div class="gappu">Hi, welcome to this demo</div>
<?php if(!$bare): ?>
</body>
</html>
<?php endif;

في حالة دعوة AJAX، الخط مرحبا، مرحبا بكم في هذا العرض التوضيحي سيكون في خلفية سوداء ولون أحمر، لأنه يقترض CSS من الوالد. ولكن في IFRAME، سيكون في خلفية زرقاء ولون أبيض، يتم تعريفه في slave1.php. يمكنك إزالة النمط من Slave1.php، وسوف تجد نص عادي مطبوع بتنسيق iFrame.

أتمنى أن يساعدك هذا. هتافات. فيجاي سرينيفاس

مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top