I am wanting to embed an HTML fragment (a Google Maps div) using an iframe. (It has to be an iframe, because that is the requirement of the WordPress plugin we are using.)
Embedding the entire HTML of the map page is making the google map misbehave. So is it possible (and good practice) to embed a 'page' that is not a complete HTML page - i.e., a 'page' that is just an HTML snippet (in this case, the map div and associate JavaScript)?
An idea is to set the iframe to the appropriate width and height and set the scrolling attribute to "no". I've seen this many times.
Whatever you embed with iframe will be taken as a complete document. Technically, HTML code that consists of only a div element and a script element is not valid, but browsers don’t care: they treat it as if it were a complete HTML document containing those elements in its body.
This answers the question asked, but I presume that you wanted to ask how to extract such elements from a document (dynamically). The answer is that it you would need server-side code that gets a document by URL, parses it, and returns the extracted part. The URL of such a code would then be used in the src attribute of iframe. Generally, such operations may constitute a copyright infringement, if performed without the consent of copyright owner. When using Google Maps for example, you should limit your actions to those permitted by Google.
Related
I have a page which contains an animation that is embeded in thousands of websites where the company I work for run ads.
However I would like to embed this animation in the website of the company that I work for because they produced the animation (of course). When our ad-partners embed our animation they use an iframe pointing to
http://example.com/pagina_animacao/
So I created a page inside the company I work for's domain containing this exactly iframe:
http://example.com/?q=aceitar-contrato-criacao-site
Because this iframe can be considered as duplicate content (it is published at /?q=aceitar-contrato-criacao-site and at /pagina_animacao/) I went to the URL /pagina_animacao/ and configured the canonical tag as:
<link rel="canonical" href="http://example.com/?q=aceitar-contrato-criacao-site"/>
Is this the right thing regarding canonical standards to avoid having duplicated content?
After waiting some time to Google crawl this website I took a look at the report and indeed, the URL https://www.sitepor500.com.br/pagina_animacao/ is not being listed anymore as an indexed URL \o/
I also used SEARCH CONSOLE (tool from Google) to see what Google was seeing at https://www.sitepor500.com.br/?q=aceitar-contrato-criacao-site and it crawled this page CONSIDERING the content of the iframe! I just did a search at google by:
site:sitepor500.com.br "semantic ui"
And Google showed at the result the link that CONTAINS the iframe! \o/ I used the word "semantic ui" cause that 2 words only appears inside the iframe in my entire domain. So it's a pretty good test case!
So you CAN and you SHOULD use canonical tag inside iframe cause people MAY embed your iframe in external content and your iframe content will probably appear as duplicated content!
I have an external page that I want to embed within my page- it has it's own scripts and CSS that I don't want to conflict with mine. Normally I'd just use an <iframe> and be done with it, but this is a mobile optimised site, and I want to avoid extra HTTP calls wherever possible. So, I want to run the request on the server side and embed the resulting HTML within my page, so that the client never has to be make it's own request.
I can do that by doing something like:
<iframe id="test"></iframe>
<script>
var doc = $("#test")[0].contentWindow.document;
var $body = $('body',doc);
$body.html('<h1>Test</h1>');
</script>
But I'd rather do this without using JavaScript at all. Is that possible? Any content I put between the <iframe> and </iframe> tags gets ignored, as it is used for compatibility reasons with browsers that do not support iframes.
Why not just use a <div>? Optionally, set a fixed width and height and add overflow:auto to its CSS.
Eventually you should be able to use the srcdoc attribute on the iframe. But, it currently is not widely supported. In the meantime your only options are javascript or just having the browser make the call with the traditional src attribute. You might look here, as I believe this stackoverflow question is quite relevant.
I have HTML content (mostly e-mails) that I would like to display in an archive. Seeing as some of these records contain their own styles, images, and headers, they need to be displayed independently and confined to its container so as not to interfere with the page displaying it. I immediately thought of an iframe.
I have two ways I can do this, both are somewhat indirect. 1) I can draw an iframe that points to about:blank and use Javascript to draw the content into the iframe after the page loads. 2) I can create a secondary PHP page that returns only the content of the e-mail and point the iframe to it as the src attribute. These solutions are simple enough, but I was wondering if there is a more direct way.
I found solutions like these, but they suggest using options 1 or 2 above. The point of this question is: "Is there a more direct way to preload HTML content directly into an iframe than to rely on Javascript or a secondary page?"
Html code as IFRAME source rather than a URL
Specifying content of an iframe instead of the src to a page
I am not sure how much more "direct" you can get than to specify a page in the src attribute of the iframe.
You already link to the only answer that actually works in your question that does not include using a src page or using EMCAScript to draw the iframe content. Remember thought that data urls are still limited in the number of bytes of data they can display in most browsers because there are limits to the length of the data url itself.
I would really suggest that you use the src attribute with a seperate backend script as that will decouple and increase the maintainability of your code as you can develop the scripts responsible for the page itself seperatly from those that show the iframe content.
How can I make an iframe that will display only part of the iframes' webpage?
Lets take youtube for example.
How can an iframe display only the youtube video player?
Thanks,
Oded
This is impossible: An iframe will always show the full document. The Same Origin Policy will prevent you from taking a part out of it.
The only workaround would be to fetch Youtube's HTML data from your server (using a server side language), then translate all relative references contained in the page, and output it as if it were a page on your server. You could then isolate specific elements from it because you're in the context of your own domain. This is called setting up a server side proxy.
However, this is a highly imperfect and tough process, and almost (sometimes completely) impossible to get right without breaking stuff, especially with JavaScript and Video. Plus it's most likely illegal, at least in the case of YouTube.
If you're looking specifically for YouTube, you could just fetch the embed code dynamically for the video you're after and display it that way. If you're looking for a general solution, you're in for a long session with the HTML for the target site. If you figure out that your content is all within a <div id='content-you-want'>, for example, then you could do something like:
$.get('proxy.php?url=' + urlEncode("http://my-target-url.com"), function(result_data) {
$("#target-element").html($(result_data).find("#content-you-want").html());
}
if you're using jQuery. But there's still a load of work to be done if the stuff you want isn't conveniently all wrapped up in a div with an id. And you'll need proxy.php to beat the same origin policy.
I am writing a testing framework for my web app. The case is to test some AJAX methods. While there are some server side errors, the response of AJAX calling is a HTML document log. However, I would like to display the HTML document in the same testing page while the response received. I am afraid I cannot insert the HTML document into a div since it is not html snippet but a complete HTML document. Is there anyway to deal with the problem without server-side effort?
Besides, I have considered about iframe. However, it seems that it only could display a webpage by specifying the url.
Thanks in advance!
Edit
I tested Aaron's second solution. It surprised me that I could insert a complete HTML document into HTML document and keeps its styles.
You have two options:
Create an iframe and load the HTML document into it
Or locate the body element in the result and just add the content of that element to the div next to your test case.
The first one can cause problems with Cross Site Scripting (which you may or may not apply to your case). The second one means you have to merge the styles of the results into your test HTML document or it won't look as you want.