2009-09-27 78 views
1

我正在寻找包含HTML文件的客户端的轻量级方法。特别是,我希望在第三方网页上启用客户端包含researchr.org的发布页面。例如,我想一个页面导出像是否有轻量级的客户端HTML包含方法?

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的原始策略相同,即包含页面和包含页面不是来自同一个域(这是整个要点)。

解决此问题的任何想法?这可能是两种:

  • 一个CSS技巧,使iframe的灵活
  • 一个JavaScript技术解除iframe的内容,一个div中包括页面
  • 一些其他的方法,我”的高度被忽略了

要求:包含的代码应该是最小的。

回答

0

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

0

如果你使用jQuery,您可以使用load方法通过AJAX检索页上,可以从它的内容拼凑而成,并注入到已有的元素。唯一的问题是它需要JavaScript。

0

为什么不使用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所说,你可以使用代理。

+1

“你为什么不使用AJAX?” ...因为内容位于不同的域... – James 2009-09-27 19:12:26

+1

你可以使用代理来解决这个问题 – ceejayoz 2009-09-27 19:41:42

+0

也提供了一个JS要求,而代理可以是性能禁止的 – annakata 2009-09-27 20:42:44

2

不会。同源策略会阻止您执行任何此类操作(并且是正确的)。你必须去服务器端,在你的服务器上有一个脚本访问该页面并将其内容复制到你自己的页面中(最好是在构建时/在后台;你可以在访问时或通过AJAX来完成),但是会涉及到很多刮你的服务器和他们的计划,可能不理解之间的通信。

或者只是忍受滚动或使IFRAME很高。

相关问题