javascript - 如何用angularjs检测混合内容？

Question

我有一个 angularjs 应用程序在 tomcat 上运行，在 loadbalancer 后面

如果应用程序是通过负载均衡器使用 https 请求的，那么平衡器当然仍会通过 http 在内部请求应用程序。

问题:在这种情况下，我想隐藏一个显示混合内容的选项卡(因为我必须嵌入不支持 https 的外部 pdf 链接，因此我想隐藏它们)。

我无法使用 $location.protocol()，因为该应用位于负载均衡器之后，并且始终只获取 http。

问题:我是否有机会检测浏览器是否实际显示了混合内容？

Answer 1

您无法通过简单的方式检测到它。您可以尝试在 iframe 上监听加载事件并设置超时，当触发超时时，阻止 iframe，因为 iframe 没有像这样加载(jsfiddle example):

checkMixedContent(urlToCheck, function(urlToCheck) {
    // For example, change location
    alert('ok');
    // load iframe
}, function() {
    alert('Error: resource timed out');
    // hide iframe / show message
}, checkDelay);

function checkMixedContent(urlToCheck, successCallback, errorCallback, checkDelay, dontCheckOnError) {
    checkDelay = checkDelay || 10000;
    // 1. Create invisible iframe and append it to body
    var iframeHelper = document.createElement("iframe");
    iframeHelper.src = urlToCheck;
    iframeHelper.height = 0;
    iframeHelper.width = 0;
    iframeHelper.style.visibility = 'hidden';
    document.body.appendChild(iframeHelper);

    // 2. Set time out and while content on iframeHelper.src should be definitely loaded
    var checkTimeout = window.setTimeout(function() {
        errorCallback(urlToCheck);
    }, checkDelay);

    var onLoad = function() {
        window.clearTimeout(checkTimeout); // if OK - not show error => clearTimeout

        iframeHelper.removeEventListener('load', onLoad);
        iframeHelper.removeEventListener('error', onError);
        document.body.removeChild(iframeHelper);
        successCallback(urlToCheck);
    };

    var onError = function() {
        window.clearTimeout(checkTimeout); // if OK - not show error => clearTimeout

        iframeHelper.removeEventListener('load', onLoad);
        iframeHelper.removeEventListener('error', onError);
        document.body.removeChild(iframeHelper);
        errorCallback(urlToCheck);
    };

    // 3. If everything is fine - "load" should be triggered
    iframeHelper.addEventListener('load', onLoad);


    // Turn "true" in case of "X-Frame-Options: SAMEORIGIN"
    if (!dontCheckOnError) {
        iframeHelper.addEventListener('error', onError);
    }

}