Is it possible to change document.readyState with JavaScript?

Question

I'm loading HTML via an iframe on a site. The HTML being loaded is supposed to wait to load certain content only after the parent document has finished loading (document.readyState == 'interactive' || document.readyState == 'complete'). The problem is that the HTML content is manually loaded into the iframe well after the parent document has finished loading.

Is there any way to spoof the readyState of the parent document in order to verify the loaded HTML content isn't rendering prematurely?

Answer 1

This is a partial answer to your question: There are two different things here: Document Object Model and Javascript. DOM is the state of the browser that stores all required information to display the viewer of this page. Javascript is the tool used to query/manipulate state (read DOM).

DOM notifies Javascript of readystate change and this is only one-way as this property is read-only. Short answer to your question is "No", you can not alter readyState property using Javascript.

To see this for yourself, you can pull up a console(Firebug, Chrome dev tools) etc. and in the console type:

typeof document.readyState // "String"
document.readyState // "complete"
document.readyState = "hello world" // "hello world"
document.readyState // if you expected it to show "hello world" it still shows "complete"

Answer 2

let readyState = 'loading';
Object.defineProperty(document, 'readyState', {
    get() { return readyState },
    set(value) { return readyState = value },
});

console.log(document.readyState);
document.readyState = 'interactive';
console.log(document.readyState);
document.readyState = 'complete';
console.log(document.readyState);