web-dev-qa-db-ja.com

ajaxを使用してIFRAME内にページをロードする

iFRAMEを使用してページを読み込むのはどうですか？これが可能かと思っていました。

例、以下のiframeがあります。

<iframe id="iframe" width="1024" height="600" src="http://www.sample.com"></iframe>

www.sample.comページを単にこのURLをsrc属性、代わりにajaxを使用して現在のページデータを取得し、IFRAMEタグを使用してロードします。私はほとんどの場合IFRAMEキャッシュに大きな問題があるので、これについて考えています。

私もこれを試しますが、私の側では完全には機能しません。

<iframe id="iframe" width="1024" height="600" src="http://www.sample.com?random=1422841682605""></iframe>

randomは、このiframeをロードするたびに変更されます。

下の画像のようにレスポンシブツールに適用したいと思います。実際のビューが必要な場合ここをクリック.

enter image description here

アイデアがありましたら、ありがとうございました。

javascriptjqueryhtmlajaxiframe
7
Anthony Carbon

引き続きsrcを使用できますが、次のようなデータURLを提供します。

src = 'data:text/html;charset=utf-8,' + 
    encodeURIComponent( // Escape for URL formatting
        '<!DOCTYPE html>'+
        '<html lang="en">'+
        '<body><h1>Another document!</h1></body>'+
        '</html>'
    );
5
c-smile

JavaScriptを使用して、いくつかの異なる方法でiframeの場所を変更できます。

_var frame = document.getElementById("iframe");
frame.src = "http://www.sample.com";
frame.contentWindow.location = "http://www.sample.com";
frame.contentWindow.open("http://www.sample.com");
_

もちろん、iframeには十分注意する必要があります。 iframeが外部ドメイン（つまり、「クロスオリジン」、つまりメインのWebページがホストされているのと同じドメインではない）を指している場合、ブラウザーのセキュリティポリシーに違反し、多数の操作または読み取りを試行するとエラーがスローされます。プロパティ。

また、iframe要素のsrc属性を変更すると、iframeは自動的に新しい場所に移動します。ただし、私が提案した他の2つの方法のいずれかを使用する場合、iframe要素のsrc属性は変更されません（iframeのコンテンツが新しい場所を指している場合でも）。

Iframeの場所を取得する必要がある場合は、次のことを試すことができます。

_iframe.contentWindow.location.href;
_

ただし、iframeが同じドメインでホストされていないサイトを指している場合は、エラーが発生します。安全のために、try {} catch (e) {}ブロックを使用してください。

2
DRAB

リンクの前に必ず「http：//」を使用してください。例：

<iframe src="http://www.google.com"></iframe>
1
Mustafa A.

_www.sample.com_が同じドメインにある場合は、次のようにすることができます。

_<div id = "targetDiv"></div>
<script>
$('document').ready(function() {
    $('#targetDiv').load('www.sample.com');
});
</script>
_

ただし、同じドメインの場合は、おそらく.load('/');を使用します。

1
sideroxylon