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
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');
});
I'm using the extjs library. I've got a blank panel and I want to load another one of my ext projects into it with an iframe. Here is my function (called from a button), "thepanel" is my blank panel.
function(button){
var div = document.getElementById('thepanel');
div.innerHTML = "<iframe src=\"../../../project2/?&type=grades&gradeitem1=40691&\"></iframe>";
}
I can see the GET request in firebug's console when I run the function and all my second project code/data all shows up in an iframe when I look a the HTML in firebug but nothing new shows up in the browser. Any ideas of what could be keeping my iframe's contents from showing
I am using MVC architecture, here is the code that declares my panel:
items:[{
xtype:'panel',
itemId:'two',
id:'thepanel',
region:'center',
}]
UPDATE: I've tried moving the iframe to the html config option of the panel instead of adding it through jquery with a button click. Again, I can see the code from the url in the iframe show up in firebug but nothing shows up in my application. Here is the code declaring my panel:
xtype:'panel',
itemId:'two',
id:'thepanel',
region:'center',
html:'<iframe src=\"../../../extjproh2/?&type=grades&gradeitem1=40691\"></iframe>',
height:400,
width:400,
Ended up using this plugin from the sencha forums:
http://www.sencha.com/forum/showthread.php?110311-iframePanel&p=943573#post943573
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.
see the snap shot and you will understand what i mean.
You should locate the iframe on the page using your browser's code inspection (CTRL + U generally), and then use jQuery (because its convenient) to remove it. So you should add a script like that in your page: $(function() { $('#pubPath').remove(); }); or switch to another website.
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.