1

I am trying to understand how iframe calls the URL specified in its src attribute. When we look at the network tab in Chrome developer tools, the Type column shows as "document".

Consider the below HTML snippet

<!DOCTYPE html>
<html>
<body>

<h1>The iframe element</h1>

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3549.400553850174!2d78.03995351513306!3d27.175144783015277!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x39747121d702ff6d%3A0xdd2ae4803f767dde!2sTaj%20Mahal!5e0!3m2!1sen!2sin!4v1660205543740!5m2!1sen!2sin" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>

</body>
</html>
enter image description here

In case of fetch API, the type is seen as fetch. enter image description here Similarly, when we make xmlHTTPRequest() the type is xhr.

So, I have the below questions:

  1. What does type "document" in case of iframe indicate?
  2. Which native JS method does iframe use to load the URL in its src attribute?
  3. Since, I cannot use xhr breakpoint, how to add a breakpoint in Chrome Developer tools before the URL in iframe's src attribute is about to be invoke(not sure if that's the correct terminology here)?
Improve this question
2
  • "Which native JS method does iframe use to load the URL in its src attribute?" - Chrome isn't written in JavaScript - and you can use Chrome and other web-browsers to load web-pages, including pages using iframes all with JavaScript disabled. Commented Aug 11, 2022 at 8:30
  • 1
    The specs are here, and just FYI, it does actually involve the same Fetch API that fetch does use under the hood (with different params) Commented Aug 11, 2022 at 8:43

2 Answers 2

Reset to default
1

What does type "document" in case of iframe indicate?

That the browser made the request for a HTML document to show in a user-facing browser window, just like Netscape 1.0 did back in the day.

Which native JS method does iframe use to load the URL in its src attribute?

Since, I cannot use xhr breakpoint, how to add a breakpoint in Chrome Developer tools before the URL in iframe's src attribute is about to be invoke(not sure if that's the correct terminology here)?

There are two options, and you can use both together:

  1. The Navigation and Resource Timings API in the DOM supported by most browsers.
  2. Chrome Developer Tools' built-in "Event Listener Breakpoints".

    • Go to the Sources tab and open the right-hand list to select the top-level "Load" and "Window" events. Once checked, the debugger will break when any iframe in the current document raises any of those events (especially load and navigate).

    • Like so: enter image description here

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

"native JS", I meant vanilla javascript as I come from Angular background. I have added another question #3, can you please check?
1

What does type "document" in case of iframe indicate?

That the URL points to an (in this case HTML) document.

Which native JS method does iframe use to load the URL in its src attribute?

None.

Browsers provide APIs to let webpages execute JavaScript in a page and interact with the browser in various ways.

They tend not to be written in JavaScript or use it for most of their internal operations. (C++ is more common).

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.