JavaScriptを使用して動的にサイズ変更されたウェブページを埋め込む

Question

さて、最初にいくつかの背景情報：別のページにウェブページを埋め込もうとしています。サブページは、基本的にjavascriptとhtmlで書かれた小さなWebアプリケーションで、入力のいくつかの画面（ラジオボタン、テキストボックスなど）を取り、最後に結果の画面を表示します。これらの画面はそれぞれ異なるサイズにすることができます。

1）メインページにサブページからHTMLとJavaScriptのすべてをコピーし、DIV /テーブル/何でそれを固執：

は私が埋め込みを行うために使用してみました2つの方法があります。

2）サブページを独自のファイルに保存し、embed/object/iframeを使用して埋め込みます。

最初の方法を使用すると、ページは正常に動作します。私が埋め込んでいるサブページは、実際には外部アプリケーションによって生成され、たびにページが新しいバージョンに置き換えられるという唯一の本当の問題（ちょっとしたソリューションとは別に）があります。これは、長期的な解決策として第1の方法を使用することで、多かれ少なかれ退けます。

ここで2番目の方法には独自の問題があります。埋め込まれたjavascriptページの高さが変化するので、それを保持しているフレームは、そのサイズとともに変化する必要があります。私はhereのソリューションのいずれかを使用してサイズを変更することができますが、ユーザーが各画面を進むにつれてフレームのサイズは更新されません。

私がこれまでに思い付くことができるもっとも近い解決策は、document.onclickハンドラを使用して、サブページの次の画面が表示されるようなクリックを捕捉することです。ハンドラは非常に短時間（次の画面を表示できるように）一時停止してから、必要なサイズ変更機能を呼び出します。しかし、これは非常にハックな解決策のように感じられます。また、スクロールバーがフレームの横に表示されている間に若干目立つ遅延があります。私はこれを行うより良い方法がなければならないと考えています。

Answer 1

ファイルが同じサーバー/ドメイン上にある場合は、jQueryを使用してロードできます。ここではいくつかのjQueryのコードは次のとおりです。

<script type="text/javascript"> 
$(document).ready(function() { 
$('#id-of-div').load('/path/to/page.html'); 
}); 
</script> 

ちょうどあなたがページがにロードしたいのdivのidにid-of-divを変更し、ページへの実際のURLに/path/to/page.htmlを変更します。 （あなたはそれのドメインを必要としません、それへの道のり）

私はこれが役立つことを望みます。

これがあなたの質問に答えた場合は、この回答を受け入れるために、この横のチェックマークをクリックしてください。