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 iframeis loaded from another domain, causingPermission denied to access property 'document'when I try to useiframe.contentWindow.documentfrom 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.
 
    