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

标签 javascript load widget

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

所以基本上,我希望能够编写一些像这样的 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 事件才能正确设置页面,并且我还需要检索到的页面中的其他功能,以便检索到的页面能够响应用户交互。

关于如何解决这些问题有什么建议/提示吗?

最佳答案

有两种方法可以实现这一点。

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

    这很容易;访客页面甚至不需要特别知道它被包含在 iframe 中。

  2. 主机站点使用 <script src="http://your-site/thing.js"></script>从您的服务器运行脚本。您的脚本使用 document.write() 直接在主机文档内创建内容负载。或 DOM 方法。无论哪种方式,您都知道何时完成将它们放置到位,因此您不需要 onload .

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

关于javascript - 使用 javascript 将远程页面加载到 DOM 中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/1469345/

相关文章:

javascript - 了解异步 javascript

javascript - ng-repeat 不会循环遍历我的数组

javascript - 设置HTML5音频位置

android - 小部件数据 : ContentProvider or SharedPreferences?

qt - Qml Text Item如何设置行间距?

javascript - 检查函数是否对数组中的任何项返回 true

java - 是否可以在 Spring 中为注入(inject)方法创建 junit 测试?

jquery 判断加载时间是否超过设定时间

jquery - 使用jquery将外部html文件加载到div

主屏幕 WidgetKit 上的 iOS 时钟动画