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。（你不需要它的域，只需要它的路径）

我希望这会有所帮助。

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

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

1 个答案: