3

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?

amdilley
  • 103
  • 1
  • 5
  • I'm pretty sure jQuery 1.9 and previous contain some "workabouts" for such a case. You might want to check out the relevant source to see what trickery lies within. – user2864740 Feb 22 '14 at 00:38
  • Are you referring to $.isReady? I thought that was used to work in tandem with $(document).ready() and didn't actually modify document.readyState. I'll have to look into jQuery source files and see what exactly is going on. It would be nice to have a pure javascript solution – amdilley Feb 22 '14 at 00:49
  • Why dont you use a $.Deferred()?So you basically return a promise, and then only load the iframe when the deferred is resolved. Let me know if you need further explanation... – Alex Shilman Feb 22 '14 at 01:04
  • If you describe the actual problem you're trying to solve in a little more detail, we might better be able to help you. – jfriend00 Feb 22 '14 at 01:41
  • I work with ad placements that are given in the form of script tags to be executed within an iframe on a page. When testing an ad the initial load of the ad must be under a certain weight. The rest of the ad can be loaded after the parent document has finished loading. To get the ad to load on demand, I set up a textarea field where the relevant script tags can be pasted. By clicking the adjacent button, the textarea contents will be loaded as the HTML for the iframe. To verify the bulk of the load is coming after the page load I needed a way to simulate a loading environment. – amdilley Feb 22 '14 at 08:22

2 Answers2

4

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"
Vikram
  • 4,162
  • 8
  • 43
  • 65
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);
Aleksandr Guidrevitch
  • 418
  • 6
  • 7