在 Metro 应用程序中嵌入带有远程网站的 iframe 的正确方法

Question

在我的 win 8 Metro 应用程序中通过 iframe 嵌入外部网站时遇到问题。

我只是照常做

<iframe src="http://d1303.de/boom.htm"></iframe>

如果嵌入式网页出现严重错误（javascript 错误...，就像 http://d1303.de/boom.htm 的情况一样），我的整个应用程序崩溃并且 Visual Studio 抱怨包含网站深处的某些脚本文件中的某些内容.

在处理远程 iframe 时有什么特别需要考虑的吗？

Answer 1

我在msdn论坛上问过这个问题，终于得到了一个帮助答案from Steven Cheng here：

对于基于 javascript 的 Windows Store 应用程序、外部网页 通过 iframe 引用的内容将在与 本地页面（从项目内容文件夹加载）。因此，iframe 托管的外部页面将无法访问某些系统 API 和 资源。

对于您的情况，我认为 iframe 托管的外部页面不应该 导致主 Windows 应用商店应用程序（主机应用程序）崩溃。我有 创建了一个简单的测试 Windows Store javascript 应用程序（使用 Navigation 项目模板）并添加一个页面以显示 iframe 元素中的“http://d1303.de/boom.htm”页面。这里是 我的行为：

1) 当通过“Ctrl + F5”开始时，当导航到 iframe 页面，页面只是无法加载 iframe 内容，因为有 脚本错误。但托管应用程序不会崩溃，我仍然可以 导航回其他页面以在其他页面上正常工作。

2) 当通过“F5”开始调试应用程序时，它会中断 导航到 iframe 页面时进入 Visual Studio。这是因为 默认调试设置将在 VS IDE 应用程序中发生未处理的 js 异常（您可以看到 通过“Debug --> Exceptions...”菜单进行配置）。另外，如果我 选择“继续”，应用程序仍然可以继续运行（导航到 其他页面工作）。

所以 iframe 引用页面中的脚本错误只会破坏其 自己的页面。有关网络不同上下文的更多信息 在基于 javascript/html 的 windows 商店应用程序中加载的页面，如下 这本书很适合你：

免费电子书：使用 HTML、CSS 和 JavaScript 编程 Windows 8 应用程序 （第一次预览） http://blogs.msdn.com/b/microsoft_press/archive/2012/06/04/free-ebook-programming-windows-8-apps-with-html-css-and-javascript-first-preview.aspx

Answer 2

您好，因为在 Windows 8 中您不能从其他域注入，您不能只将 iframe 嵌入到您的代码中，但您可以做的是：

您可以创建一个 div，而不是在 div 内设置 innerHTML，并将响应静态响应到其他 URL，您可以这样尝试：

---HTML---

<div id="container"></div>

---JS---

WinJS.xhr({
url: 'http://yourwebsitehere'
}).done(function (result) {
     var domContainer = document.getElementById("container");
     domContainer.innerHTML = toStaticHTML(result.response);
});

但它不会像一个 iframe 一样，但你仍然可以使用它，如果你只是想显示来自其他域的页面。

-Yusak Setiawan-

http://apptivate.ms/apps/1271/mathboard