Heres a tricky one . .
I have a webpage (called PageA) that has a header and then simply includes an iframe. Lets call the page within the iframe PageB. PageB simply has a bunch of thumbnails but there are a lot so you have to scroll down on PageA to view them all.
When i scroll down to the bottom of the pageB and click on a thumbnail it looks like it takes me to a blank page. What actually happens is that it bring up the image but since the page that is just the image is much shorter in height, the scroll bar stays at the same location and doesn't adjust for it. I have to scroll up to the top of the page to view the picture.
Is there anyway when i click a link on a page that is within an iframe, the outer pages scroll bar goes back up to the top
thks,
ak
#mek after trying various methods, the best solution I've found is this:
In the outer page, define a scroller function:
<script type="text/javascript">
function gotop() {
scroll(0,0);
}
</script>
Then when you define the iframe, set an onload handler (which fires each time the iframe source loads i.e. whenever you navigate to a new page in the iframe)
<iframe id="myframe"
onload="try { gotop() } catch (e) {}"
src="http://yourframesource"
width="100%" height="999"
scrolling="auto" marginwidth="0" marginheight="0"
frameborder="0" vspace="0" hspace="0" >
</iframe>
The nice thing about this approach is it means you do not need to make any changes to the pages included in the iframe (and the iframe contents can happily be in another domain - no cross-site scripting issues).
Javascript is your best bet. You can use the scroll() method to scroll back up to the top of your IFRAME. Add a javascript handler in the body load so that each time you click a thumbnail, call a function that calls scroll() to scroll up.
I've spent a considerable amount of time trying to figure out how to scroll to the top of the iframe from within the PHP code I was calling (from within the parent ASP.NET page). I never figured I could scroll to the top using the same javascript but in the iframe's onload event. Thanks!
Related
On my webpage, I've got several tabs and, in one of them, I want to display an iframe containing a Google Doc.
When the iframe is displayed, the google doc is loaded and there is no problem.
But by default, this tab is hidden (so, the iframe inside too)
Something like
<div id="tab-1">...</div>
<div id="tab-2" hidden>...</div>
<div id="tab-3" hidden><iframe src="https://docs.google.com/document/d/......../edit?usp=sharing&embed=true"></iframe></div>
with jquery to handle actions
And, when the iframe is hidden, it seems like it can't load until it's not hidden anymore. The problem is I endlessly get popup saying
This error has been reported to Google and will be examined as soon as possible. To continue, please refresh the page.
In a page without tab, if the iframe has the "hidden" attribute, the bug occurs too
I could get around the problem by "hiding" the iframe with a "heigth=0" but when it's hidden in a tab, the problem comes back
Have you ever met this problem and find a way to solve it ? Do I have to "dynamically load" the google doc iframe when it becomes visible ? (And then, how to ?)
Thanks
I don't mind if the iframe is loaded later so I decided to load the <iframe> with jquery, when the tab is opened, by storing the src into the attributes.
There could be problems though, if the tab is closed while the iframe is not fully loaded.
That's why I prevent this by stop loading if the tab is changed, (and don't if it's already fully loaded.)
html
<iframe data-src="https://docs.google.com/document/d/......"
class="google-doc"></iframe>
jquery
//Stops iframe loading
$(".tab-to-close iframe.google-doc").not('.isloaded').prop('src','')
//Change the tabs
$(".tab-to-close").hide();
$(".tab-to-open").show();
var iframetoload = $(".tab-to-open iframe.google-doc");
//Load iframes on the new tab
iframetoload.prop('src',iframetoload.data('src'))
//If it's loaded in time, save it so it's not destroyed on tab changing
iframtetoload.on('load', function(){
$(this).addClass('isloaded');
});
What are the possible ways in which I can preserve an iframe embedded in a view in between my route changes?
As the route changes from Route A-> Route B, Ember destroys the View for A. My View for A has an embedded iframe which I would love to preserve and not reload when Route A is revisited.
So far, I tried moving my iframe to a parent view that is not destroyed when exiting Route A but browsers reload iframes when you move them around in the DOM, so its a moot exercise.
Indeed nesting is the right choice for you problem of iframe.
Here is a detailled example with a counter to see when the iframe is reloaded.
|-home
|-about
|-elsewhere
This important part of the fiddle is :
<div class="border-row">
This is home
<iframe src="http://emberjs.com/" width="100%" height="150px" onload="App.HomeController.countLoadings()"></iframe>
count : {{App.HomeController.loadcount}}<br/>
isDestroying : {{isDestroying}}<br/>
isDestroyed : {{isDestroyed}}
</div>
{{outlet}}
You can see that the iframe only reloads when you actually move to another part of the hierarchy route. If you navigate between home and about, the iframe stays the same.
When my iframe loads I need parent page to load different content(header,footer) while iframe its still there. I added to iframe :
window.top.location = "http://mysite.com";
It loads the new parent page but its reloading over and over again.
How can I enable only one load/iframe load, or some solution.
I have tried with
window.onload = function() {
if(!window.location.hash) {
window.location = window.location + '#loaded';
window.location.reload();
}
}
but it does nothing.
Thank you.
you just can't reload the iframe parent only without reloading the iframe too! If you want to change some content in parent page you must do it with javascript from the parent page and not the iframe.
And if you want to catch the "iframe loaded event" you must do it from inside the iframe. Looks like an impossible situation but you can still do it!
You need to let iframe and parent page comunicate, and you can do it with html5 postmessage (works even if parent and iframe are in different domains!). If you need to have IE7 compatibility too you can use easyXDM javascript library instead of postMessage, just search for example in their site.
Simply do a postMessage from iFrame when jQuery(document).ready() (or any similar event) is triggered, the parent page must have a listner waiting for this message for trigger the header/footer/anything change event.
Saw alot of manual loads of iframes in answers, but I need the page to automatically load the fist menu option and I am using nyroModal (class=iframe which opens it iframe style with nyroModal).
The reason for this is the menu for a bunch of other iframe content is in this iframe as well and I'd like it to stay open and the menu stay in this auto opened iframe.
Hopefully this makes sense to someone.(?)
You can use the manual function inside the event handling:
$(window).load(function() {
// my code to open manually an iframe using nyroModal
});
You can get the snippet to open the iframe at this page: Open iframe manually in nyroModal
I am hoping someone has experience with this, but I am loading a window from a link on my main page. The window loads an ASPX page via the window’s loadmethod of iFrame. The aspx page has its own update panel on it and I was wondering how I can call the window’s “spinner” / process indicator while the page is processing. I have looked at the documentation on some online information about it but I am not sure how to implement it.
To show the spinner this is what I do:
function getMochaWindow(windowId) {
return MochaUI.Windows.instances.get(windowId);
}
function showLoading(winEl) {
getMochaWindow(winEl.id).showSpinner(winEl.getElement('.mochaSpinner'));
}
You need to call showLoading() passing the window element where you want it to appear.