To get started with iframes there are two general ways of doing so one would be to add one to the actual hard coded html by editing an html file or template, and the other way would be to create and inject one into a document. In this section I will be coving how to go about doing just this involving a single html file.
When working with an iframe that is hard coded into the html the process is to just gain a reference to it by using something like document.querySelector, document.getElementById, or any other means that will result to the hard coded iFrame element in the html of the page.
Once a reference to the iFrame is obtained it is possible to access the window object of that iFrame via the contentWindow property of the iFrame element. This works in much the same way as the window object of the page itself as such I can add content to the iFrame in the same manner as i would with the main window object.
With this kind of approach you might have some html like this.
Never the less if the url is at the same domain, or if it is a url where this sort of thing will happen without issue then the following might work out okay.
To do so I just need to set the src attribute of the iframe to the url of the resource that I want to load and display in the iframe. If all goes well that alone should work, if not finding a solution to this is outside the scope of this post.