jquery - 如果 iframe src 加载失败，则捕获错误。错误 : -"Refused to display ' http://www. google.co.in/' in a frame.."

Question

我正在使用 Knockout.js 绑定(bind) iframe src 标签(这将针对用户进行配置)。

现在，如果用户配置了 http://www.google.com (我知道它不会在 iframe 中加载，这就是为什么我将它用于 -ve 场景)并且必须在 IFrame 中显示。但它会抛出错误:-

Refused to display 'http://www.google.co.in/' in a frame because it set 'X-Frame-Options' to 'SAMEORIGIN'.

我有以下 Iframe 代码:-

<iframe class="iframe" id="iframe" data-bind="attr: {src: externalAppUrl, height: iframeheight}">
    <p>Hi, This website does not supports IFrame</p>
</iframe>

我想要的是，如果 URL 无法加载。我想显示自定义消息。 FIDDLE HERE

现在，如果我将 onload 和 onerror 用作:-

<iframe id="browse" style="width:100%;height:100%" onload="alert('Done')" onerror="alert('Failed')"></iframe>

加载 w3schools.com 工作正常，但加载 google.com 则不行。

其次:-如果我将其作为一个函数并像我在 fiddle 中所做的那样尝试，它就不起作用。

<iframe id="browse" style="width:100%;height:100%" onload="load" onerror="error"></iframe>

我不知道如何让它运行并捕获错误。

已编辑:-我见过Want to call a function if iframe doesn't load or load's stackoverflow 中的问题，但它显示可以在 iframe 中加载的网站的错误。

此外，我还调查了 Stackoverflow iframe on load event谢谢!!

Answer 1

由于Same Origin Policy，您将无法从客户端执行此操作由浏览器设置。除了宽度和高度等基本属性之外，您无法从 iFrame 获取太多信息。

此外，Google 在其响应 header 中设置了“X-Frame-Options” ' 同源。

即使您对 Google 进行了 ajax 调用，您也无法检查响应，因为浏览器强制执行同源策略。

因此，唯一的选择是从您的服务器发出请求，看看是否可以在 IFrame 中显示该网站。

因此，在您的服务器上......您的网络应用程序将向 www.google.com 发出请求，然后检查响应以查看它是否具有 X-Frame-Options header 参数。如果它确实存在，那么您就知道 IFrame 将出错。