当浏览器阻止iFrame时如何检测

Question

在一个https网站上，我正在尝试将随机提交的URL加载到iframe中，允许用户在我的用户界面中嵌入查看该网站。

只要远程url是https（像我的网站一样），并且远程服务器没有明确地阻止自己被嵌入iframe，那么网站就会在iframe内正常显示。我知道如何创建一个服务器端脚本，可以预先检测是否由于第三方有意的iframe阻止而被阻止。

然而，有许多原因导致iframe被浏览器（而不是第三方服务器）阻止：

1.如果远程url不是https，或者转发到非https url，则会被浏览器阻止（显示在iframe中）。

2.如果远程站点确实是https，但包含至少一个由http提供的资源（而不是https），则浏览器将由于{{link1：混合内容}}而阻止iframe。

我的问题是：如何使用客户端JavaScript检测当浏览器阻止iframe时。我希望我的客户端JavaScript能够检测到阻止和阻止的原因（如果我可以检测到，我知道如何记录）。

总之，我已经知道如何使用服务器端脚本检测第三方阻止iframe，我只对展示如何检测Web浏览器进行阻止并使用客户端JavaScript检测感兴趣。

我可以在控制台（shift-ctrl-i）中看到这些非致命性阻止，但我不知道如何在运行时以编程方式检测它们，然后通过提供一个消息来优雅地处理这些阻止，告诉用户为什么被阻止，并提供一个链接，使用户可以在新标签页中打开资源。例如，通常我使用try/catch语句捕获错误，但我不知道如何捕获由于iframe src位置而导致的这些浏览器级别错误，似乎它们只出现在控制台中。

我的首要任务是每次未被阻止时在iframe中显示页面，并在每次被阻止时以编程方式执行其他操作。

这个例子是我尝试过的，但它不起作用：

window.addEventListener('error', function(event)
{
    console.log(`Caught Using Javascript`, event);
});

错误会在控制台中显示，但“使用JavaScript捕获”不会显示：

- Lonnie Best

---

你无法在客户端进行此操作，除非使用类似于 https://vuejsdevelopers.com/2018/12/24/vue-js-iframe-error-fallback/?utm_source=medium-ag&utm_medium=article&utm_campaign=ffi 的不正当手段。 - Melan

@Melan 虽然规范没有要求将这些错误通知到窗口，但我非常感谢你提供的巧妙解决方法；这是我见过的唯一的客户端解决方案。 - Lonnie Best

一个指示混合内容被阻止的机制似乎会违反SameOrigin策略，因为它将允许外层页面检测到内部框架的协议方案。 - EricLaw

在我看来，混合内容应该被沙盒化，而不是被阻止。阻止似乎是针对需要更优雅的安全粒度的紧急措施。 - Lonnie Best

Answer 1

看起来你的解决方案在这里 ->

https://www.whatismybrowser.com/developers/tools/iframe

另一种检查方法是使用if else语句（错误处理）。

if ( window.location !== window.parent.location ) {
  // The page is in an iframe
} else {
  // The page is not in an iframe
}

- ADITYA AHLAWAT