I would like to implement JavaScript that modifies the content of input field which is in iframe
loaded from another domain (this is the site).
Difficulties:
- Somehow jQuery is loaded with a delay, so I had to use
setTimeout()
to make sure that jQuery becomes available. - The only
iframe
is loaded from another domain, causingPermission denied to access property 'document'
when I try to useiframe.contentWindow.document
from this post. - I tried to apply cross-domain technique which is provided in this post, but it does not work.
- IDs of the elements contain semicolons, so one should use advise from this post.
Script:
// ==UserScript==
// @name ah.nl
// @include http://www.ah.nl/over-ah/services/mobiel/*
// @include https://ezpay.liquix.eu/WebReloadSolution/*
// @grant none
// @namespace http://www.example.com/gmscripts/
// ==/UserScript==
document.domain= 'ah.nl';
if (self === top) {
setTimeout(function() {
try {
$('iframe').load(function() {
console.log("Start " + this.src);
var inputs = $('input', this.contentDocument);
console.log("Got " + inputs.length);
// Below does not work:
//inputs.find('#orderForm\\:msisdnConfirm, #orderForm\\:msisdn').val('1234567890');
});
} catch(e) {
console.log(e);
}
}, 1000);
}
Produces:
Start https://ezpay.liquix.eu/WebReloadSolution/index.jsp?merchant=ahnl&language=nl&mode=reload&productCode=1
Got 1
The reason why there is one element is that <input>
element is found in top document.
Could anyone provide a working Greasemonkey solution?
FF 43.0.1, Greasemonkey v3.8.