외부 페이지의 내용을 포함하기 위해 iframe과 ajax를 사용하는 것의 차이점은 무엇입니까?

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

  •  23-08-2019
  •  | 
  •  

문제

이에 대해 읽어본 결과, ajax를 사용하면 동일한 도메인에 있는 콘텐츠만 가져올 수 있는 반면, iframe을 사용하면 모든 도메인의 콘텐츠를 가져올 수 있는 것 같습니다.그런가요?또 어떤 차이점이 있나요?

도움이 되었습니까?

해결책

두 가지 완전히 별개의 기술이라는 점을 명심하세요.

(i)프레임은 실제로 전체 HTML 페이지를 브라우저에 로드합니다.페이지가 동일한 도메인에 있는지 아니면 다른 도메인에 있는지는 순수하게 보기에는 중요하지 않습니다.

Ajax는 JavaScript 호출을 생성한 문서가 있는 서버와 대화할 수 있도록 JavaScript를 활성화하는 시스템만을 설명합니다.

(i)프레임 기술은 주어진 URL에서 완전한 HTML 페이지를 로드하고 렌더링합니다.JavaScript를 사용하여 다른 도메인의 다른 문서에 액세스하는 경우 특정 보안 제한 사항이 계속 적용됩니다.

Ajax에서는 순전히 JavaScript를 사용하여 원래 서버와 통신하고(일부 데이터 보내기) 일반적으로 일부 데이터를 다시 가져오는 것을 의미합니다.자바스크립트에서.이 데이터의 정의와 이를 활용하여 수행할 작업은 귀하에게 달려 있습니다.DOM(Document Object Model)에 삽입할지, 부품을 교환할지, 새 페이지를 로드할지 여부는 귀하에게 달려 있습니다.

어느 정도 당신은 당신이 원하는 모든 자유를 누릴 수 있습니다.페이지에 (i)프레임이 있어도 여전히 Ajax 호출을 수행하고 (i)프레임에 다른 URL을 로드하기로 결정할 수 있습니다.또는 Ajax 반환 값을 사용하여 (i)프레임 내에서 동적으로 새 HTML을 생성합니다.아니면 외부, 다른 문서에서요.

이 경우 적용되는 보안 제한을 "동일 출처 정책"이라고 합니다.

다른 팁

간단히 말해서, 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>

이제 우리는 또한 슬레이브1.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 형식으로 인쇄 된 일반 텍스트가 있습니다.

도움이 되었기를 바랍니다. 건배. Vijay Srinivas

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top