However, this isn't the case:. As this has no x-domain restraints and is completely done via the iframe handle, you may access and manipulate the contents of the frame later on. Setting the src of a newly created iframe in javascript does not trigger the HTML parser until the element is inserted into the document. Also this answer your question it's important to note that this approach has compatibility issues with some browsers, please see the answer of mschr for a cross-browser solution.
Thanks for your great question, this has caught me out a few times. You will not be able to inspect the iframe. You'll get a message. There is an alternative for creating an iframe whose contents are a string of HTML: the srcdoc attribute. This is not supported in older browsers chief among them: Internet Explorer, and possibly Safari? I know this is an old question but I thought I would provide an example using the srcdoc attribute as this is now widely supported and this is question is viewed often.
Using the srcdoc attribute, you can provide inline HTML to embed. It overrides the src attribute if supported. The browser will fall back to the src attribute if unsupported. I would also recommend using the sandbox attribute to apply extra restrictions to the content in the frame. This is especially important if the HTML is not your own. If you need to support older browsers, you can check for srcdoc support and fallback to one of the other methods from other answers.
The more solid approach is to generate an object URL from a blob and use it as a source of the dynamic iframe. Stack Overflow for Teams — Collaborate and share knowledge with a private group. Create a free Team What is Teams? Collectives on Stack Overflow. Learn more. Asked 9 years, 8 months ago. Active 8 months ago. Viewed k times. Improve this question. Trevor Burnham Trevor Burnham Thank you Hard Fork Studios! Not working yet but might be missing one bit:.
In the iframe, do I just leave an empty div and a container as Roi Bendet suggested before? For this I am writing the following but what could I be missing? It is an iframe, isn't? Not an Embeded Website element. I ended up scrapping the iframe idea so I used an iframe element and left it with no src and used the web address the site I embedded had something that was already formatted. From everything I researched I couldn't find any way to actually make the iframe element work with the standard iframe tags.
Wishlist Page is the official platform for requesting new features. You can vote, comment, and track the status of the requested features. To see this working, head to your live site. Hard Fork Studios. Jul 02, Dynamically Update iframe content with code from database. Hi, Can you share a code template of the content you want to update?
Of course, it's fairly simple to adjust the height of an iframe when the content first loads. I'll show you how to do that, too.
But if the content in the iframe changes, the iframe size may need to be adjusted further. A common use of an iframe is to present a form, so a page reload is unnecessary when the form submits. After the form is submitted, a thank-you page is displayed within the iframe. The thank-you page generally is a different size, however, and either puts scrollbars into the iframe or leaves a large blank area within the iframe.
There are other reasons that content changes within an iframe. The same principle described in this article can be used for other implementations. A caveat: The URL of the page being published within the iframe must be on the same domain as the web page with the iframe tag. Otherwise, the web page with the iframe tag won't be able to determine the size of the content within the iframe. It's subject to the built-in same-origin security restriction.
Before describing how to implement the iframe auto-resize for your site, here's the code for the above example. There are 3 files.
The purpose of the div tag is merely to provide a border with rounded corners for the iframe. At least some browsers don't implement iframe borders with as much versatility as a div tag. Put all three files into the same directory on your server. Type the URL of file 1 into your browser. You should see the same functionality as the above example, iFrame Resizing Test. When the web page with the iframe tag loads, file iframe1form.
When the button in file iframe1form. When file thank-you page loads into the iframe, it tells the web page with the iframe tag how tall the iframe shall be to contain all of the thank-you page's content. Let's get the pages ready last to first — the thank-you page, the form page, then the page with the iframe tag. The reason for doing them in backward order is so the location of a file is known before it needs to be specified.
For the JavaScript to calculate the height required for the iframe, the top margin of the web page needs to be zero. In the above example code, you'll see the body tag has margin-top:0; inline CSS.
Alternatively, removing the top margin from the body tag can be done in a style sheet. If a top margin remained in place, the iframe's height calculation would be off by the amount of the margin at least in some browsers.
Similar to the top margin of the page, any top margin in the first line of content will cause the iframe's height calculation by the amount of the margin.
0コメント