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

Question

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

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

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

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

使用第一种方法，页面将按其应有的方式运行；唯一真正的问题（除了有点混乱的解决方案之外）是我嵌入的子页面实际上是由外部应用程序生成的，并且页面经常被更新的版本替换。这或多或少排除了使用第一种方法作为长期解决方案的可能性。

现在第二种方法有其自身的问题。由于嵌入的 javascript 页面的高度发生变化，因此容纳该页面的框架的大小也需要随之变化。我可以使用此处提供的任何解决方案更改大小，然而，当用户在每个屏幕上前进时，这些不会更新框架的大小。

到目前为止，我能想到的最接近的解决方案是使用 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。 （您不需要它的域，只需要它的路径）

我希望这有帮助。

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