是否有轻量级的客户端 HTML 包含方法？答案

【问题标题】：Is there a light-weight client-side HTML include method?是否有轻量级的客户端 HTML 包含方法？
【发布时间】：2009-09-27 18:48:01
【问题描述】：

我正在寻找一种用于客户端包含 HTML 文件的轻量级方法。特别是，我想在第三方网页上启用 researchr.org 的发布页面的客户端包含。例如，我想导出一个类似

的页面

http://researchr.org/profile/eelcovisser/publications

（可能只是该页面的出版物框。）

使用 iframe 可以包含 HTML 页面：

<iframe class="foo" style="height: 50em;" width="100%" frameborder="0"
   src="http://researchr.org/profile/eelcovisser/publications">
</iframe>

但是，iframe 需要指定固定高度，而我要导出的页面没有固定高度。结果有一个丑陋的滚动条：

http://swerl.tudelft.nl/bin/view/EelcoVisser/PublicationsResearchr

我发现一个对似乎很有吸引力的方法的引用

http://www.webdeveloper.com/forum/archive/index.php/t-26436.html

它使用 iframe 导入 html，然后从包含的文档调用 javascript 到包含文档中定义的函数，该函数将包含文件的正文内容放在包含文件的 div 中。这在我的场景中不起作用，可能是由于 javascript 的相同来源策略，即包含页面和包含页面不是来自同一个域（这是重点）。

有解决这个问题的想法吗？可能是：

使 iframe 高度灵活的 CSS 技巧
一种将 iframe 的内容提升到包含页面中的 div 的 javascript 技术
我忽略的其他一些方法

要求：要包含的代码应该最少。

【问题讨论】：

标签： javascript include client-side

【解决方案1】：

没有。同源策略会阻止您做任何这些事情（并且是正确的）。您将不得不去服务器端，在您的服务器上有一个脚本访问该页面并将其内容复制到您自己的页面中（最好在构建时/在后台；您可以在访问时或通过 AJAX 进行，但是将涉及您的服务器和他们的服务器之间的大量抓取流量，这可能不受欢迎。

或者只是忍受滚动条或使 iframe 非常高。

【讨论】：

【解决方案2】：

据我所知，没有 CSS 技巧，唯一的方法是查询 iFrame 的 document.documentElement.offsetHeight 或 scrollHeight，取决于哪个更高，取该值并将其应用于 iframe 的 css 高度（添加+ 'px')。

【讨论】：

【解决方案3】：

试试这个ajax with cross domain 功能

【讨论】：

【解决方案4】：

为什么不使用 AJAX？

试试这个：

<div id="content"></div>

<script type="text/javascript">

function AJAXObj () {
    var obj = null;
    if (window.XMLHttpRequest) {
        obj = new XMLHttpRequest();
    } else if (window.ActiveXObject) {
        obj = new ActiveXObject("Microsoft.XMLHTTP");
    }
    return obj;
}

var retriever = new AJAXObj();

function getContent(url)
{
    if (retriever != null) {
        retriever.open('GET', url, true);
        retriever.onreadystatechange = function() {
            if (retriever.readyState == 4) {
                document.getElementsById('content').innerHTML(retriever.responseText);
            }
        }
        retriever.send(null);
    }
}

getContent('http://researchr.org/profile/eelcovisser/publications');

</script>

然后，你可以用 JS 和正则表达式解析接收到的页面内容，从那个页面中提取你想要的任何内容。

编辑：抱歉，我想我错过了它是不同域的事实。但正如 ceejayoz 所说，您可以为此使用代理。

【讨论】：

你可以使用代理来解决这个问题。
还提出了一个 JS 要求，并且代理可能会限制性能

【解决方案5】：

如果您使用 jQuery，您可以使用 load 方法通过 AJAX 检索页面，可选择从中抓取内容，并将其注入现有元素。唯一的问题是它需要 JavaScript。

【讨论】：