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?
Related
I have a parent page containing an iFrame midway down the page (same domain, have access to both). My iFrame tag looks like this:
<iframe name="Survey" onload="parent.location='https://www.example.com/ParentPage#SurveyTop';" scrolling="no" src="https://www.example.com/ChildPage" width="100%" id="iFrameResizer0">
The iFrame can get quite tall, so I have that onload command in the iFrame tag which makes the page automatically back to the top of the iFrame every time the iFrame is refreshed/loaded.
The problem is that it also immediately scrolls down to the top of the iFrame the first time the parent page is loaded, since the contents of the iFrame loads a second or two after the parent page. So the visitor never sees all the important page name/intro/hero image stuff above the iFrame.
Is there some javascript where I can initially have the parent page displayed at the top of the page, but any time the content in the iFrame is refreshed it scrolls to the top of the iFrame like it does now?
I tried putting various methods javascript after the iFrame thinking it would load and scroll to the iFrame, but then scroll back up to the top if the page, but it never worked. For example:
document.body.scrollTop = document.documentElement.scrollTop = 0;
or
window.scrollTo(x-coord, y-coord);
I also tried putting a three second delay on it but it still didn't scroll to the top. (My scripting is terrible). It's not ideal to have the page jump down to the iFrame then back to the top, but it would only happen the first time and it's a compromise I'm willing to have! Thanks!
When you say you "tried putting a three second delay on it", what code did you use? Then in your comment you ask how to create a delay... It isn't clear what method you tried that failed to work. Anyhow, to add a 3 sec delay in Javascript execution, the standard method to use is window.setTimeout(function(){YOURCODE;}, 3000);. As you noted, this would be a compromise, not really the solution you want.
A better approach would be to set an onload handler on the parent window, which would set the onload handler of the iFrame: window.addEventListener("load", function(event) {YOURCODE;}, false);. In your code in the handler you'd reference the iFrame with window.frames["iFrameResizer0"].
Because the iFrame onload handler would be set after the parent page and the iFrame have loaded, the iFrame onload code would only run when the iFrame is reloaded, not on the first load of the parent, solving your problem.
For a web page, practical reasons demand an iframe to link to other content within the domain. However, while the rest of the page (outside the iframe) doesn't need to scroll, the content within the iframe does. Rather than having a scroll bar within the iframe, how could I use the scroll bar of the page to scroll within the iframe?
The iframe links to a page from the same domain, and while it may not be possible to do this without scripting, ideally it would be a CSS-only solution. If necessary, javascript can be used.
If it helps, the iframe runs up the the bottom edge of the page, so I have been playing around with ways to extend it past the bottom and do it that way.
You would need to have the iFrame resize to the contained content to do this. A task that is after all these years still not as simple as it should be. Take a look at this lib that does the hard work for you.
https://github.com/davidjbradshaw/iframe-resizer
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 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.
Is there any way to stop an iframe re-loading its contents when I change its position within the DOM? Simple example:
<script type="text/javascript">
function moveiframe() {
var dest = document.getElementById('newparent');
dest.appendChild(document.getElementById('googleframe'));
}
</script>
<iframe src="http://www.google.com" id="googleframe"></iframe>
<input type="button" onclick="moveiframe()" value="Move" />
clicking the "Move" button changes the parent of the iframe, and reloads its contents (in Firefox and Chrome, but not IE).
Any suggestions would be much appreciated!
[Updated with background info]
I'm loading the site's adverts in placeholder divs at the bottom of the page (to prevent advert loading from holding up the page load) - and then shifting the divs they've been written in to their correct container once loaded. It all works great... unless the ad that gets served uses an iframe (like google adsense) in which case the ad gets loaded twice and the serving is messed up.
Considering the simplicity of your test case, it looks like the only methods you have available to put an element inside another will always force the contents to reload.
[Edit] After seeing what you're trying to do, there are a couple things you can try:
All ads could be served in IFRAMEs (on your own site) which will not hold up loading of the page and can be placed in the right place right away.
As mentioned above IFRAMEs won't hold up loading of the page so you could put the ads in place right away if they are IFRAMEs and load them at the bottom if they are something else. Of course, this won't work if the slow part is before you know if you are going to get an IFRAME or not.
You could keep the content in it's placeholder DIV but when it's done loading just reposition (with CSS absolute positioning) over the right place in the page. Not the most elegant solution, but should work fine.
I'm regretting my original answer, as it seems to be causing other headaches. Here's a few other potential solutions that you may not have tried:
Place the ad scripts inside of divs with their display style set to none. Then, move them to their final desintation and change them to display: block after the page has loaded. Perhaps this would prevent the iframes from loading their content inititially.
Try the same thing, only with visibility set to hidden, then changed to visible.
A quick guess would be to unset the value of the src attribute of the iframe element or set it to "about:blank".
It is up to you to restore the previous value (or any value) to the src attribute of the iframe (using JavaScript).
Regards,
If the ads are a fixed size, you could place them in absolutely-positioned divs instead. Then, once the page loads, you could move those container divs to their designated spots. There are a lot of Javascript samples out there for calculating an absolute position from a relative position. Of course, you would have to reserve space visually in the destination divs so the ads wouldn't cover the content.
What about using an ajax request to load the ad's contents, and adding the contents to the DOM when the ajax call returns, instead of using an iframe?