javascript - 如何在保持响应的同时将一个页面嵌入到另一个页面中？

Question

我有一个page-container.html，我想嵌入page-embeddable.html它。它本身page-embeddable.html是响应式的（它的高度根据包含元素的宽度而变化），我想在嵌入它时保持该特性。

我有以下方法但没有多大成功：

1. iframe标签。它只是没有响应。只有在高度page-embeddable.html固定的情况下才有效。但事实并非如此——它会自行回流，并且高度是动态的。
2. object标签。我尝试设置<object type="text/html" data="page-embeddable.html"></object>一个innerHtml元素，但它几乎充当 iframe。没有反应。
3. 切成page-embeddable.html小块。通过 JavaScript 加载页面引用的任何 .js 和 .css。然后将 body 标记的内部加载到 .innerHtml 上的某个 div 中page-container.html。这可以工作并且是响应式的并且高度是动态的，但是page-embeddable.html是动态生成的并且可以基于上下文具有不同的 js/css 引用。所以我必须在加载文件之前弄清楚文件中的内容。

有没有更好的方法来嵌入我忽略的页面？对于上下文，我正在尝试提供一个嵌入式小部件，有点像Codepen，除了高度需要是动态的。

标签： javascripthtmlcss