I want to open the iframe's src value in the whole tab/window when I click anywhere on it. How can I do this efficiently and easily? If you are curious, here is the page I am doing it on.
As #Pointy pointed out, you need add a new <div> either before or surrounding / containing (i.e. the parent of) the iframe which links to the src which you given the iframe. The div would have to be the same height & width of the iframe but as long you haven't applied any CSS rules under which this div would fall then it should work it out itself and contract to the needed height & width.
Even accessing the iframe document, you have to use some cross domain hack to be able to attach events to the iframde document.
You can have a look at: http://xkr.us/articles/dom/iframe-document/ to see how you can access the document.
Your best solution, and the simpler is the one suggested by Pointy in the comments. Use a div or transparent image over the iframe and attach the click event to it, grabbing the src attribute via javascript like: document.getElementById('myFrame').src
The bottom line is, from the client side, you will not be able to load the source of an external domain. You could do it through a server side httpclient call, but NOT from the client side.
Related
In my app, I need to open an iFrame, whose content comes from the same domain and uses the same protocol, and port number.
For the content in the iFrame, I want to have mouse click events, and I need to catch these events by using JQuery's $('#my-item").click(function(){ ..... }). The javscript code is in a file loaded TOGETHER with the iFrame content.
However, the mouse click event is not caught by my javascript code. I am kind of confused. I really want to KNOW and LEARN about how to do Javascript within content in an iFrame. I am not talking about javascript code loaded with the iFrame's parent.
Thanks for any input and pointers.
Regards.
I'm trying to access in jQuery to the browser width from an iframe inside facebook (app).
The issue is we're not allowed to access to a parent element of an iframe, so I'm trying to get it from a $.post() query where jQuery writes the window with, but since it's a HTTP query, there's no window parameter loaded.
So I'm wondering if we can access to the screen parameter. I mean by this, if there is any browser parameter by default, so I can resize my body page.
For example, if parent.window.width < 500, I want my body width to be set as 500.
Thanks for helping me, I appreciate !
The iFrame domain must match the parent domain to be able to access it directly.
If I remember correctly, Facebook offer a "Fluid" option for the canvas size (which sets the iFrame width to 100%). If Facebook still offer this, you could place your content in a container div and add onLoad and onResize events with jQuery in the iFrame document. You could then set the size of the container based on the iFrame document size.
I am trying to do something like:
Google
When a user hovers the link:
<div id="display-site">
//working site contained in a div
</div>
Note I am aware that I can open the link in a new window using html, thought I am interested in figuring out how I would go about 'previewing' the website contained in the <a> tag, in a div container, (if the link is hovered).
This can be done by creating an <iframe> in the DOM on hovering over an <a> and loading the href as the iframe's src= attribute. In order to make it look like a popup, you would need to position the <iframe> at an absolute location, and set its z-index CSS property to a higher value than the rest of the page content.
However, if you need to make modifications to the display of the loaded frame, such as sizing some elements to accommodate the zoom level as suggested by #David's answer, you may run afoul of the same-origin policy, as scripts will not be permitted to access properties of the loaded frame outisde the same domain.
From MDN:
Scripts trying to access a frame's content are subject to the same-origin policy, and cannot access most of the properties in the other window object if it was loaded from a different domain. This also applies to a script inside a frame trying to access its parent window. Cross-domain communication can still be achieved with window.postMessage.
Before continuing - check this benefits the user experience. When I move my mouse over a page and brush over a hyperlink I don't always want a link preview to appear on top. However, assuming this is in the best interests of your users...
Implementation wise, this can be done, as #Michael suggests, by using an <iframe>, however the document within the iframe will be displayed at the user's set zoom level, but showing a 250x250 window of a document designed for at least 1024x768 isn't going to help the user. Thus you need to display a zoomed-out, birds' eye representation of the web-page to the user.
There are ways to get the current viewport zoom level ( How to detect page zoom level in all modern browsers? ) but I don't know how setting it works (in all liklihood it's probably impossible in most cases). Furthermore I don't think you can set zoom on a per-iframe basis (assuming you can set it all).
The best way forward then is to display a scaled-down bitmap page rendering to the user - like Google does for popular pages in its search results. However this means that for every page you link to you need to get a rendered image of the target page.
I remember a few years ago there were companies that provided page thumbnail services (it was part of those annoying doubly-underlined ad text in webpages that was popular around 2005-2008), but they're a rarity now.
I guess you'll have to then set up your own service and host a layout engine (Gecko, WebKit, or Trident) in a way it can generate page thumbnails for you.
All things considered, I don't think it's worth it.
Something like this, just an idea
$('a').hover(function()
{
$('#display-site').load((this).attr('href'));
$('#display-site').show();
});
You will need to set the css property as needed
1- Find a jquery plugin that displays tooltips on element hover.
2- Insert an Iframe of the website that the link refers to inside a div residing in the tooltip container.
I'm trying to slideDown an iframe embedded into my document. The iframe contains another website. I've looked at this thread so far:
Can we do fade in and fade out in iframes
but the technique of increasing opacity does not apply to slide animations AND it does not address the problem of changing the iframe's css. This is my code so far (the iframe's id is "sketchpad"):
var skpad = document.getElementById('sketchpad').contentDocument;
var skpad$ = $(skpad);
$('.sketchBtn').bind('click',
function() {
alert(skpad$);
skpad$.slideDown(300);
}
);
I've also tried this:
skpad$.css({
display:'block'
})
.animate({
opacity:'1.0',
},300);
The bottom is not a slide down, but i was just trying to see if it would work. It didn't. Any ideas?
If you're looking to do this cross-domain, it is only possible if you can control the content on the iframe's SRC. But then, I'm guessing, if you could control the content of the iframe's SRC you would have just written the slideDown code in there, wouldn't you have?
Javascript has a Same-Origin policy in which javascript on the outer page cannot access the contentWindow or DOM (or global state) of the iframe page if it does not share the Same-Origin. Same origin in this case means that host+domain matches up, so for example www.domain.com is different than static.domain.com. Same origin also means the protocols match up.
If by chance you happen to control the content of the iframe, you could simply add the slideDown to it on DOM Ready. If you wanted to get really fancy you could implement window.postMessage to signal the child Iframe when to scroll down, but that would just be overkill likely.
Your best bet is to mess with animating the <iframe> tag itself and leaving the inner content alone. Perhaps there is a track you could do where a <div> the same color as the background of the parent page scrolls down over top of the <iframe> effectively simulating a scrollDown?
I am developing a webpage which our customers want to insert on their websites by wrapping my page in an iframe (cross domain). I don't need to interact with the parent or know anything about whats outside the iframe.
I am using HTML, CSS, Javascript and Webservices.
Question: How am I limited inside an iframe compared to if my page was running outside the iframe?
You're not. Any JS linked within the iframe from your domain will act in the context of the iframe. Aside from being crammed into an unusual container it should work the same as it would if it was loaded independently.
If your needs should change however, there are ways to send signals between parent frame and iframe if both pages have JS written to cooperate. There's methods using the # in URLs which can be read by the parent and don't force page reloads and I believe they share the window.resize event which can be fired manually without actually resizing the window.
UPDATE: There are far better ways to communicate between cross-domain iframes now than there used to be. Naturally you'll still require cooperating JS on both ends but you can use window.postMessage rather than triggering messages via window.resize and data after a hash symbol in the URL. That was a cool trick though.
When creating links you should have in mind to maybe use the target-attribute of the a-tag if you want to create a link for the parent window. Otherwise the new page would be loaded into the iframe.