1

设置：

有远程测量站，有集中的收集/处理/呈现服务器（带有网络服务器），还有观察站，为客户显示收集的数据。

这些观察站由简单的嵌入式计算机组成，配备网络浏览器，以信息亭模式工作，每个都显示来自中央服务器的一个特定网页。该网页使用 AJAX 更新，显示给定测量站的最新测量结果。连接到固定监视器，这些站应该可以几乎免维护运行多年。

现在我们已经解决了大部分问题，但问题是：如果网络服务器出现故障怎么办？浏览器将加载“无法访问”、“404”、“权限被拒绝”、“500”或服务器在该点采取的任何故障模式，并保持在那里直到有人手动重新启动观察站。

我想出的一般解决方案是将浏览器的主页设置为观察到的页面，而不是设置为始终可用的本地 HTML 文件，该文件将定期检查远程页面是否已正确加载和更新，如果失败则重新加载以任何理由执行。

问题：

问题在于跨框架脚本。我猜目标网页必须加载为框架、iframe、文本/HTML 类型的对象或其他方式，使其在不删除/禁用本地“容器”文件的情况下显示。几年前我写了一个跨框架脚本页面，绕过安全对策并不容易。从那时起，安全必须加强。

因此，从远程服务器加载的页面包含一段 javascript，如果一切顺利，它会定期启动（一些 setInterval），或者如果出现问题则不会。该信号周期性地到达容器帧使其重置其超时并且不采取任何其他动作。

如果信号没有到达，当超时到期时，容器开始定期刷新加载的网页，直到服务器固定并加载正确的内容，向加载器发出信号。

每次触发特定功能时，如何让远程页面向从 file:// URL 加载的本地（容器）页面发出“活动”信号（例如，设置变量）？

4

2 回答 2

2

有一个名为porthole的库，它基本上可以完成 SF. 的回答所描述的内容，但形式更正式。我刚刚写了一个网页来切换显示两个 iframe 之一。在我的顶级网页中

var windowProxy;
windowProxy = new Porthole.WindowProxy(baseURL + '/porthole/proxy.html', frameId);
windowProxy.addEventListener(onMessage);
...
function onMessage(messageEvent) {
    if (messageEvent.origin !== baseURL) {
        $log.error(logPrefix + ': onMessage: invalid origin');
        console.dir(messageEvent);
        return;
    }
    if (messageEvent.data.pong) {
        pongReceived();
        return;
    }
    $log.log(logPrefix + ': onMessage: unknown message');
    console.dir(messageEvent);
}
...
var sendPing = function () {
    $log.log(logPrefix + ': ping to ' + baseURL);
    ...
    windowProxy.post({ 'ping': true });
};

加上一些额外的控制逻辑。在子网页中，以下是我必须添加的所有内容（加上portholeService.init()来自控制器的调用）：

// This service takes care of porthole (https://github.com/ternarylabs/porthole)
// communication if this is invoked from a parent frame having this web page
// as a child iframe. Usage of porthole is completely optional, and should
// have no impact on anything outside this service. The purpose of this
// service is to enable some failover service to be build on top of this
// using two iframes to switch between.
services.factory('portholeService', ['$rootScope', '$log', '$location', function ($rootScope, $log, $location) {
    $log.log('Hello from portholeService');

    function betterOffWithFailover() {
        ...
    }

    function onMessage(messageEvent) {
        $rootScope.$apply(function () {
            if (messageEvent.origin !== baseUrl) {
                $log.error('onMessage: invalid origin');
                console.dir(messageEvent);
                return;
            }

            if (!messageEvent.data.ping) {
                $log.error('unknown message');
                console.dir(messageEvent.data);
                return;
            }

            if (betterOffWithFailover()) {
                $log.log('not sending pong');
                return;
            }

            windowProxy.post({ 'pong': true });
        });
    }

    var windowProxy;
    var baseUrl;
    function init() {
        baseUrl = $location.protocol() + '://' + $location.host() + ':' + $location.port();
        windowProxy = new Porthole.WindowProxy(baseUrl + '/porthole/proxy.html');
        windowProxy.addEventListener(onMessage);
    }

    return {
        init: init
    };
}]);

作为参考，这些页面使用AngularJS，以防$rootScope.$apply您不熟悉等。

于 2014-10-09T17:39:32.403 回答
0

跨框架、跨站点通信的方法是使用postMessage。

包含的框架在每次正确执行时应执行：

window.top.postMessage('tyrp', '*');

容器文件应包含：

window.onmessage = function(e)
{
    if (e.data == 'tyrp') {
        //reset timeout here
    }
};
于 2013-04-16T13:54:18.397 回答