2013-01-24 14 views
5

ブラウザウィンドウ(_topフレーム)の内容をiframeに読み込まれたドキュメントに置き換えることはできますか?リロードページなしで_topウィンドウの内容を置き換えます

このような何か:

<html> 
<head> 
<script type="text/javascript" language="JavaScript"> 
$(document).ready(function() { 
    $("#link").click(function() { 
    // should present in the browser window the content of the iframe WITHOUT reload 
    // even preserve javascript/head code 
    $(document).html($("#frameDestination").html()); 
    }); 
}); 
</script> 
</head> 
<body> 
<a id="link" href="#">full window</a> 
<iframe id="frameDestination" src="http://www.some-random-site.com" width="900px" height="500px"></iframe> 
</body> 
</html> 
+0

問題を正しく理解してください:アンカータグとiframeのあるページがあります。アンカータグをクリックすると、ページ全体がiframe内にあるものになります(HTTP要求を作成せずに)。 – jbabey

+0

私はこれが可能であるとは思えません。ブラウザウィンドウ全体をカバーするようにiframeを再配置することは可能かもしれませんが、元のページ内に入れ子になっています。 – Blazemonger

+0

@jbabeyまさに!ブラウザのアドレスバーにURLを入力するだけで、ページが読み込まれたかのようにシミュレートします。同じHTMLドキュメントが既にiframeに読み込まれているため、サーバーに新しいHTMLドキュメントを尋ねる新しい往復を望んでいません。 –

答えて

1

利用内容()jQueryのではiframeを扱います。

$("#YourIframe").contents().find("html").html(); 

これはのみはIFRAMEを親として同じドメインであれば仕事に行くのです。

1

私は、クロスドメインをテストしていませんが、同じドメイン上で、私はこのスクリプトの作業があります。最新のFirefoxで

$(document).ready(function() { 
    $("#link").click(function() { 
    var iframeBody = document.getElementById("frameDestination").contentDocument, 
    head = iframeBody['head'].innerHTML, 
    body = iframeBody['body'].innerHTML; 
    $('body').html(body); 
    $('head').html(head); 
    }); 
}); 

を、私もでスクリプトタグで変数を設定することができますよそのリンクをクリックした後、_topにその値が表示されます。

+0

ありがとう@Gitninja!同じドメインの魅力のように機能しますが、別のドメインでテストしただけで機能しません(FFとChrome)。 –

+0

iframe srcがjavascriptによって設定されている場合、クロスドメイン制限は適用されませんが、まだテストされていません。あなたはあなたのサイトでjavascriptを使ってiframeタグを動的に生成できますか? – Rustavore

+0

@Gitnija:では動作しません: 'var ifrm = document.createElement(" IFRAME "); ifrm.setAttribute( "src"、 "http://www.somesite.com"); ifrm.setAttribute( "id"、 "frameDestination"); ifrm.style.width = 1200+ "px"; ifrm.style.height = 500+ "px"; document.body.appendChild(ifrm); ' –

関連する問題