В чем различия между использованием iframe и ajax для включения содержимого внешней страницы?

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

  •  23-08-2019
  •  | 
  •  

Вопрос

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

Это было полезно?

Решение

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

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

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

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

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

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

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

Другие советы

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

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

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