使用javascript嵌入动态大小的网页

Question

好的，首先是一些背景信息：我正在尝试在另一个页面中嵌入一个网页。子页面基本上是一个用 javascript 和 html 编写的小型 Web 应用程序，它接受多个输入屏幕（单选按钮、文本框等）并在最后给出一个带有结果的屏幕。这些屏幕中的每一个都可以是不同的尺寸。

我尝试使用两种方法进行嵌入：

1) 将子页面中的所有 html 和 javascript 复制到主页中，并将其粘贴到 div/table/whatever 中。

2) 将子页面保存在自己的文件中，并使用 embed/object/iframe 进行嵌入。

使用第一种方法，页面的行为应如此；唯一真正的问题（除了一种混乱的解决方案）是我嵌入的子页面实际上是由外部应用程序生成的，并且每隔一段时间该页面就会被更新的版本替换。这或多或少排除了使用第一种方法作为长期解决方案的可能性。

现在第二种方法有它自己的问题。由于嵌入的 javascript 页面的高度会发生变化，因此持有它的框架需要随之改变大小。我可以使用here 给出的任何解决方案来更改大小，但是这些解决方案不会在用户浏览每个屏幕时更新框架的大小。

到目前为止，我能想出的最接近的解决方案是使用 document.onclick 处理程序来捕获可能导致子页面的下一个屏幕出现的任何点击。处理程序暂停很短的时间（以允许下一个屏幕出现），然后调用必要的调整大小函数。然而，这感觉像是一个非常 hacky 的解决方案，并且当滚动条尚未扩展以适应新内容时，滚动条显示在框架的一侧也会有一个稍微明显的延迟。我在想一定有更好的方法来做到这一点。

Answer 1

如果文件在同一个服务器/域上，你可以用 jQuery 加载它。这是一些jQuery代码：

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

只需将id-of-div 更改为要加载页面的div 的id，并将/path/to/page.html 更改为页面的实际URL。 （你不需要它的域，只需要它的路径）

我希望这会有所帮助。

如果这回答了您的问题，请记得点击旁边的复选标记以接受此答案。