2009-09-24 70 views
2

我正在尝试编写一个Web部件,该部件允许用户在自己的网页中显示自定义信息(来自我的网站)。我想使用的机制(用于创建Web小部件)是javascript。使用javascript将远程页面加载到DOM中

所以基本上,我希望能够写一些JavaScript代码是这样的(这是最终用户拷贝到他们的HTML页面,在其页面上得到显示的内容我的小部件)

<script type="text/javascript"> 
/* javascript here to fetch page from remote url and insert into DOM */ 
</script> 

我有两个问题:

  1. 我怎么写javascript代码从远程URL抓取网页? 理想的情况下,这将是普通的JavaScript(即不使用jQuery等 - 因为我不想强迫用户去第三方脚本的jQuery这可能与他们的网页等其他脚本冲突)

  2. 我抓取的网页中含有内嵌的JavaScript,它获取在body.onLoad事件,以及它们在响应用户操作使用的其他功能执行的 - 我的问题是:

我)。 body.onLoad事件是否会为检索到的文档触发? ii)。如果将检索到的页面直接转储到DOM中,则文档将包含两个<body>部分,该部分不再有效(X)HTML - 但是,我需要触发body.onLoad事件才能正确设置页面,而且我还需要检索页面中的其他功能,以便检索到的页面能够响应用户交互。

关于如何解决这些问题的任何建议/提示?

回答

5

这有两种方法。

  1. 主机站点使用标记将页面包含在页面中的固定大小框中。它在自己的document中运行,它自己的<body>onload事件;它位于您网站的安全上下文中,因此如果出于某种原因需要,可以使用AJAX回拨至您的服务器。

    这很简单;访客页面甚至不需要知道它被包含在iframe中。

  2. 主机站点使用<script src="http://your-site/thing.js"></script>从您的服务器运行脚本。您的脚本使用document.write()或DOM方法直接在主机文档内创建一系列内容。无论哪种方式,你知道什么时候你已经完成把它们放在适当的位置,所以你不需要onload

    您正在主机的安全上下文中运行,因此您无法将AJAX发送到服务器或直接查看服务器的Cookie;任何此类数据都必须作为脚本的一部分提供。 (您可以可以将主机服务器的cookies和跨站点脚本查看到他们的任何页面中,反之,如果脚本中有任何敏感数据,主机站点也可以查看它,因此存在隐式信任关系任何时候一个网站从另一个脚本内容中获取脚本)

+0

感谢bobince,这就是我一直在寻找的东西。我恳求我会采用iframe的方法(甚至认为它是在HTLM的后续版本中进行deprectaed) – scoobydoo 2009-09-24 09:29:59

+0

iframe在HTML过渡中,但它不被弃用,也不会消失(例如在HTML5中)。这更多的“框架”被认为是一件坏事。 – bobince 2009-09-24 12:10:47

+0

感谢您的澄清! (让我更有信心去