iframe to external sites - html

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.

Related

Disabling target="_blank" in iframe from opening new window? (or possible work arounds)?

I have an issue-
I'm creating an html 5 app and including external websites in with an iframe. Inside the external website some of the links have
target="blank"
When clicked, this exits out of my app and opens up and entirely new window. Ideally, I want to keep them inside the iframe which allows them to use my app navigation (and is the point of an app).
Unfortunately I don't think I'm going to be able to achieve this with frontend technology alone. I'm looking for ANY solution. What I need is to basically get the "iframe" to act as its own window and my nav to be an entirely separate piece.
My current code base is html5, css, javascript, php (but possibly looking into integrating in node.js).
Here is a fiddle showing the issue: http://jsfiddle.net/zmx9e/

How can I make an iframe capture ONLY one element of a web page?

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.

How to display part of a webpage using iframes?

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.

How to play a background audio across multiple HTML pages.?

Is there a solution to have the background audio/music play across multiple page on a website, WITHOUT restarting on every page load.
The website currently uses a frameset, but I'm looking for an alternative.
Without making the whole site AJAX I think frames are the only way.
Here's a tutorial for making an ajax site if you need it.
http://net.tutsplus.com/tutorials/javascript-ajax/how-to-load-in-and-animate-content-with-jquery/
It will give you separate addresses for each page.. sorta.
The only other alternative is to use site-wide AJAX. Each link would dynamically change the page content without navigating away.
Implementing this is time-consuming. Each dynamically loaded page must be stripped of headers and each link must contain a Javascript event that calls an AJAX request.

How to make links break out of iframe when you only control the iframe page (not the framed pages)?

I have a site that displays other sites through an iframe on certain pages. It does this in order to display a toolbar that is relevant to the reader (like Facebook and Owly does). However, when the user chooses to leave the original site I want the bar to go away. As you might gather, I don't control the sites in the iframe, and they're on another domain than the iframing page.
I tried target="_parent" on the <iframe>, no luck. Then I tried various scripting solutions, but they all fail due to the same domain restriction. My last try was to have a timeout check for changes in the iframe URL, but iframe.contentWindow.location.href is restricted when page is on another domain (unlike the object iframe.contentWindow.location which I found a bit weird).
Any solutions to this problem? I know iframes aren't the hottest thing around, but they do the job in this case.
Try target=_top That should open the page in the full body of the window.
No solutions.
The only way to get a link to open in the top frame is to have access to the link itself. As you observed, the same origin policy prevents JS from outside the frame accessing it.