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.
Related
I use codeigniter to send email... After activating the user account it sends another email to insert tag but when the user receives the message, no tag appeared but when I tried using other elements like or it renders the style but how come doesn't?
$message = 'Congratulations! Use the script below to add your widget.<br>';
$message .= "<iframe frameborder=\"0\" src=\"<?=base_url() ?>business/widget/{$id}\" height=\"320px;\" width=\"480px\" style=\"border: 1px solid #ccc;\"></iframe>";
$this->email->message($message);
if($this->email->send())
{
other code....
}
Gmail and many other email clients are very strict about what HTML you can use in your HTML emails.
<iframe> is strictly off limits, because it could expose the user to a website which they were not expecting, and the website at the other end could record info about the user (such as their IP address). Images are blocked for similar reasons.
If I were you, I'd stick to using super basic HTML and CSS. Focus on getting the message to the user and hope their client makes the message look pretty. Always offer a link to view the full message elsewhere.
<iframe>s cannot be used in most email clients – whether in an application or as a website. They are either stripped for one of several reasons:
The mail/web client could have trouble rendering it, so it is excluded.
An <iframe> could be used for phishing/malicious attacks, putting malicious code in what was otherwise vetted and safe (the browser/client can't see or scan what gets loaded into an iframe, it just loads it into the DOM).
An alternative, (what YouTube do), is instead of embedding something in an iframe (in their case, a video), they have an <a> wrapped around an <img> or thumbnail, which gives the impression that you are playing a video. All it does when you click on it, is it take you to that video's URL.
If you were trying to put extensive code into the email, you could manually write it in. This however has other effects, as some other tags are limited/styling can be a big hassle for emails. AFAIK some HTML5 elements are also stripped from emails.
As Orangepill said, Campaign Monitor have done the legwork and provided a chart showing where iframes can be used. They also suggest to stay away from iframes.
A solution not mentioned would be to have an image, with a link at the bottom that says View this message in a webpage which will take the user to a page with the <iframe> working.
I'm trying to capture div#map-canvas from my site, www.RichBlocksPoorBlocks.com, to make an iframe that people can embed anywhere.
Here's my iframe
<iframe src="http://www.richblockspoorblocks.com#map-canvas" style="width:600px; height:400px;"></iframe>
It goes to div#map-canvas, but it also loads the rest of the page as well. I'd like that div to be the only thing in the iframe.
Is this possible with an iframe?
To achieve this, it would be easier to create a separate .php or .html document which contains only the parts that you want to show in the iframe and exclude everything else.
So, instead of the iframe pointing to "http://www.richblockspoorblocks.com#map-canvas", it would point to something like : "http://www.richblockspoorblocks.com/map-canvas.php".
This would be a very quick and efficient way of doing what you want, and doesn't require any outside libraries or javascript.
When you call http://www.richblockspoorblocks.com#map-canvas the hash will probably cause the browser to look for a corresponding <a name="foo">bar</a> so this won't work using an iFrame.
What I would recommend doing is writing a script which you call from your iFrame which accepts the name of the page fragment to load. I know using jQuery's $.load() you can call an element ID to load a page fragment, and I think it's also possible in PHP too...
You cannot use hash links in iframes.
You can and should use, few lines of you'r favorite server side language to create the specific content you want to render and then link to it. in that way, you'r server will send out to the end user only the desired data and also it saves bandwith and loading time.
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.
Is it legal to have an IFrame on a website which inside has an external website?
In an IFrame is it possible to only show a section of the src that isn't the top left of the site (for instance if there was a chart in the middle of a website, could u have just the chart in your Iframe, or at least start it centred there)
Is there any way to stop my IFrame from auto redirecting me to the external site
for 3: ie
<iframe src="http://fifa.com"></iframe>
Just sends me to fifa instead of actually showing that site in a frame.
Instead of using an iframe is it possible to copy the chart and source it back to where you got it from?
Fifa is probably using javascript to prevent you from placing the site in an iframe... and it's generally a pretty shady thing to do.
This depends on the rules of the external website. You should at least ask them for permission and only do it if they are OK with it (no replay does not mean they agree!)
No, an IFrame is like a new browser.
If the external site uses JavaScript to break out of frames, then the only way to prevent this is to disable JavaScript in your browser.
I guess it's legal, but it isn't decent.
Ah, so you only wanna show the scores i.e., I guess there should be a way, but again it's not decent, you just don't use such constructions, you just don't!
No! That's exactly the point of that redirect. The only way to do that will be with javascript disabled.
I am wondering if there's a way I can embed a webclip into a webpage, as in, I can have a portion of a webpage embedded as a widget into another page. I was thinking it might be possible someway though Mac OS X's Dashboard widgets, one can take a webclip and make a dashboard widget, as I hear that they are HTML based, and thus one could reverse-engineer one into simple HTML code. Kind of the reverse of what google does for gadgets. Any ideas? I'm open to any solutions.
Thanks.
The easy, html-based way is with an iframe. What this does is put an entire webpage within a box on your page. You don't have much flexibility with it.
You can also do it with javascript. JQuery makes it easy with their .load() method. Going this route, you can load a webpage with javascript, load specific tags within that page, or even modify the incoming code before displaying it.
Most basically:
$("#xxxx").load("url.html");
Where xxxx is the id of the html tag where you want the content to be loaded on your page (e.g. if you have <div id="xxxx">content will go here</div> in your HTML). See more details at: http://docs.jquery.com/Ajax/load.
If these don't suffice, the next step would be PHP (I doubt you'd need it, but if you'd like to, you car search for file_get_contents on php.net).