Каковы различия между использованием iframe и ajax для включения содержимого внешней страницы? - PullRequest
3 голосов
/ 20 декабря 2008

Я читал об этом, и кажется, что если вы используете ajax, вы можете загружать контент только в одном домене, тогда как с помощью iframe вы можете загружать контент из любого домена. Это тот случай? Какие еще различия есть?

Ответы [ 3 ]

13 голосов
/ 20 декабря 2008

Имейте в виду, что это две совершенно разные технологии.

Фрейм (i) действительно загружает полную страницу HTML в области в браузер. Находится ли страница в том же или другом домене для чистого просмотра, не имеет значения.

Ajax описывает только систему, позволяющую JavaScript поддерживать связь (и с текущими ограничениями безопасности для браузера, только с) с сервером, с которого вы документируете, на котором вы генерировали вызов JavaScript.

Технология фрейма (i) загружает и отображает полную HTML-страницу с любого заданного URL. Определенные ограничения безопасности при доступе к другим документам из других доменов с помощью JavaScript по-прежнему применяются.

В Ajax предполагается использовать только JavaScript, чтобы общаться с исходным сервером (отправлять некоторые данные) и, как правило, возвращать некоторые данные. В JavaScript. Что это за данные и что вы с ними делаете, зависит от вас. Вне зависимости от того, вставляете ли вы его в DOM (объектную модель документа), обмениваетесь частями или загружаете новую страницу.

В определенной степени у вас есть всякая свобода, которую вы хотите. Вы можете иметь (i) фрейм на странице, по-прежнему делать вызов Ajax и принять решение загрузить другой URL в (i) фрейм. Или используйте возвращаемое значение Ajax для динамического создания нового HTML-кода внутри фрейма (i). Или снаружи, в другом документе.

Ограничения безопасности, применяемые в этом случае, называются «политикой того же происхождения».

1 голос
/ 20 декабря 2008

Проще говоря, iframe похож на обычный фрейм, но он не разбивает окно браузера на разделы, он расположен прямо внутри страницы и зависит от полосы прокрутки.

Ajax, с другой стороны, использует javascript для частичной загрузки страницы, что позволяет загружать небольшие объемы данных с сервера без необходимости выполнения полной обратной передачи. Например, Youtube использует Ajax, когда вы публикуете комментарии, голосуете, ставите видео в очередь для воспроизведения и т. Д. Они делают это, чтобы ваше видео не прерывалось и не перезапускалось после полной обратной передачи страницы.

0 голосов
/ 23 ноября 2016

Помимо этих различий, упомянутых другими, есть и другие. 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.

Надеюсь, это поможет. Приветствия. Виджай Шринивас

...