如何在iframe中观察DOM的变化？

Question

我正在使用Jquery-Mutation摘要https://code.google.com/p/mutation-summary/ “一个JavaScript库，可以快速，轻松和安全地观察DOM的更改”

可以在这里找到： https : //github.com/joelpurra/jquery-mutation-summary

这是工作示例： http : //joelpurra.github.io/jquery-mutation-summary/example/demo.html

我希望能够从父窗口观察iframe中DOM的变化。 这是我的代码

$(function() {
var $ChangeThere = $('#myframe') //iframe id myframe
    $ChangeThere.mutationSummary('connect', callback, [{
    all: true
}]);
function callback(summaries){
//something changes in iframe dom
    alert('change!');
}
});

上面的代码不起作用。 我也从同一个域访问。

Answer 1

您应该能够在iFrame中进行监听，然后将结果发送回父级。 您可以在父级中建立一个函数，然后从iFrame中对其进行更新，如下所示。

家长：

function alertfromiframe(message){
    alert(message);
}

的iFrame：

$(function() {
var $ChangeThere = $('#frameContents') //iframe id myframe
    $ChangeThere.mutationSummary('connect', callback, [{
    all: true
}]);
function callback(summaries){
//something changes in iframe dom
    parent.alertfromiframe('change!');
}
});

Answer 2

从要作为iframe加载的页面中公开方法：

var RPC = require('frame-rpc');
var origin = document.referrer;

var rpc = RPC(window, window.parent, origin, {
    beep: function (n, cb) {
        document.querySelector('#n').textContent = n;
        cb(n * 111);
    }
});

然后从包含iframe的父页面中进行操作：

var RPC = require('frame-rpc');
var frame = document.querySelector('iframe');
var usrc = new URL(frame.getAttribute('src'));
var origin = usrc.protocol + '//' + usrc.host;

frame.addEventListener('load', function (ev) {
    var rpc = RPC(window, frame.contentWindow, origin);
    rpc.call('beep', 5, function (result) {
        document.querySelector('#result').textContent = result;
    });
});

您可以在此处找到的模块： substack / frame-rpc您可以使用wzrd.in/standalone/frame-rpc或

npm安装框架-rpc