javascript - 使用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。 (你不需要它的域，只需要它的路径)

希望对您有所帮助。

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