Quais são as diferenças entre usar um iframe e Ajax para incluir o conteúdo de uma página externa?

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

  •  23-08-2019
  •  | 
  •  

Pergunta

Eu tenho lido sobre isso, e parece que se você usar ajax você só pode trazer conteúdo que reside no mesmo domínio, enquanto que com um iframe você pode trazer o conteúdo de qualquer domínio. É esse o caso? Que outras diferenças existem?

Foi útil?

Solução

Tenha em mente que eles são duas tecnologias completamente separadas.

A (i) quadro realmente carrega uma página HTML completa na área no navegador. Se a página está no mesmo ou em outro domínio, para a visão pura, não importa.

Ajax só descreve um sistema para facilitar o JavaScript para conversar com (e com restrição de segurança corrente através do navegador, apenas com) o servidor do qual você documento em que você gerou a chamada JavaScript.

Os (i) as cargas de tecnologia quadro e processa uma página HTML completa de qualquer URL dado. Certas restrições de segurança para acessar outros documentos de outros domínios com JavaScript ainda se aplicam.

Com Ajax, ele só está destinado a usar exclusivamente o JavaScript para falar com o servidor de origem (enviar alguns dados) e, geralmente, obter algum volta dados. Em JavaScript. O que esses dados é eo que você faz com ele, é com você. Se você inseri-lo no DOM (Document Object Model), peças de substituição ou carregar uma nova página é até você.

Até certo ponto você tem toda a liberdade que você deseja. Você pode ter um (i) quadro em uma página, ainda fazer uma chamada Ajax e decidir para carregar outro URL para o quadro (i). Ou usar o valor de retorno Ajax para gerar novos HTML dinamicamente dentro do quadro (i). Ou fora, em outro documento.

As restrições de segurança aplicáveis ??ao caso concreto é chamado de "política de mesma origem".

Outras dicas

Muito simplesmente, um iframe é como um quadro regular, mas não dividir a janela do navegador em seções, fica à direita dentro de uma página e é afetado pela barra de rolagem.

Ajax, por outro lado, usa JavaScript para fazer cargas parciais de uma página, permitindo que pequenas quantidades de dados a ser carregado a partir do servidor sem a necessidade de fazer uma nova postagem completa. Por exemplo, o YouTube usa Ajax quando você postar comentários, votação, vídeos de fila para jogar, etc. Eles fazem isso para que seu vídeo não seja interrompido e reiniciado por um postback página completa.

Além destas diferenças mencionadas por outros, existem outros também. iframe carrega uma página html / php inteiro, se é do próprio servidor ou outro servidor externo. Normalmente, ele tem uma <html> fresco, <head> e tag <body> também. Ajax única cargas parte da página html / php.

Além disso, Ajax puxa o CSS (e talvez, até mesmo códigos JavaScript) do arquivo principal, mas em caso de Iframe, não pode puxar o mesmo.

por exemplo este é o arquivo mestre de codificação. 

<!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>

Agora, temos também um outro arquivo, chamado como 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;

Em caso de chamada Ajax, a linha Oi, bem-vindo a esta demonstração estará em fundo preto e cor vermelha, uma vez que está pedindo o css do pai. Mas, em iframe, que será no fundo azul e cor branca, que é definido em slave1.php. Você pode remover o estilo de slave1.php, e você vai encontrar texto simples impresso no formato iframe.

Espero que isso ajude. Felicidades. Vijay Srinivas

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top