使用javascript将远程页面加载到DOM中

sco*_*doo 2 javascript load widget

我正在尝试编写一个Web小部件,允许用户在自己的网页中显示自定义信息(来自我的网站).我想要使​​用的机制(用于创建Web小部件)是javascript.

基本上,我希望能够编写一些像这样的javascript代码(这是最终用户复制到他们的HTML页面,以便在我们的页面中显示我的小部件)

<script type="text/javascript">
/* javascript here to fetch page from remote url and insert into DOM */
</script>
Run Code Online (Sandbox Code Playgroud)

我有两个问题:

  1. 如何编写javascript代码以从远程URL获取页面?理想情况下这将是PLAIN javascript(即不使用jQuery等 - 因为我不想强迫用户获取第三方脚本jQuery,这可能与其页面上的其他脚本冲突等)

  2. 我提取的页面包含内联javascript,它在body.onLoad事件中执行,以及用于响应用户操作的其他函数 - 我的问题是:

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

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

bob*_*nce 5

这有两种方法.

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

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

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

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