3

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

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

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

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

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

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

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

4

1 回答 1

2

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

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

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

我希望这有帮助。

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

于 2011-08-17T00:08:29.263 回答