[英]How can I observe changes to the DOM in an iframe?
我正在使用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!');
}
});
上面的代碼不起作用。 我也從同一個域訪問。
您應該能夠在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!');
}
});
從要作為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
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.