外部ページのコンテンツを含めるために iframe と ajax を使用することの違いは何ですか?

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

  •  23-08-2019
  •  | 
  •  

質問

これについて読んでいると、ajaxを使用すると同じドメインにあるコンテンツのみを取り込むことができるのに対し、iframeを使用すると任意のドメインからコンテンツを取り込むことができるようです。そうですか？他にどのような違いがありますか?

役に立ちましたか？

解決

ベア心の中で彼らは2つの完全に独立した技術です。

A（I）フレームは本当にブラウザにエリア内の完全なHTMLページをロードします。ページが同じまたは別のドメインにあるかどうか、純粋な鑑賞のために、重要ではありません。

アヤックスは、あなたがからJavaScript呼び出しを生成し、その中文書化したサーバ（とブラウザ間で現在のセキュリティ制限と、のみを持つ）と話をするためにJavaScriptを容易にするためのシステムが記載されています。

（I）フレーム技術のロードとは、与えられた任意のURLから完全なHTMLページをレンダリングします。 JavaScriptを使用して他のドメインから他のドキュメントへのアクセス、特定のセキュリティ制限が適用されます。

アヤックスでは、唯一の（いくつかのデータを送信する）元のサーバーと通信するために、純粋にJavaScriptを使用して、通常のバックいくつかのデータを取得するためのものです。 JavaScriptで。これは何のデータであり、あなたがそれを行うには、あなた次第です。あなたは、DOM（Document Object Model）の中にそれを挿入交換部品または新しいページをロードするかどうかはあなた次第です。

ある程度、あなたが望むすべての自由を持っています。あなたはまだAjax呼び出しを行い、（I）フレームに別のURLをロードすることを決定し、ページ上の（I）フレームを持つことができます。または（I）フレームの内側に動的に新しいHTMLを生成するために、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