I've been having this weird problem that I thin I am close to solving but would like some input. It relates to this problem here: Firefox and multiple iframes not loading I have 4 iframes loading on a page, each in a separate tab. The tabs are made using Twitter Bootstrap.
Now here comes the really weird part with FireFox. The iframe only works for if the current tab is showing with the iframe. The iframes in the other tabs whose divs are not shown all have javascript errors and do not work. But if I take all the iframes and put them in the same tab that is displaying, they work.
Is there a logical explanation for this?
I recently had an issue very similar to this. From what I found, the "display:none" value of an iframe can cause error in Firefox if used in its declaration. There are a few opposing opinions on this here Setting iFrame CSS to display:none during load but I have found through my research that it's a common problem in Firefox. (edit: another link on this bug ->https://bugzilla.mozilla.org/show_bug.cgi?id=548397)
That being said, my issues vanished when I realized that not every iframe in a new instance wasn't being loaded in HTML5, but instead HTML4.
Related
I know this question was asked before, but I couldn't find an adequate solution that still works.
I have a little plugin, that consists of an iframe that has another iframe inside it. This structure makes sense since the first iframe only contains some text + button clicking on which opens the second iframe with the actual website (couple interconnected webpages)
It works pretty well on every browser except safari. On safari the actual website doesn't seem to be able to keep the session and on every request/page load it treats you as a completely new visitor.
What makes it weirder is that safari sometimes working just fine. For example I installed this plugin on 3 websites and 1 of them is actually working.
I know that safari just acts weirdly when it comes to session within an iframe, so I really wanted to see if this problem was already solved or is it still a huge issue for people who develop plugins similar to mine
I have the same issue. The iframe needs to be loaded as the parent page and save a cookie. Then the iframe will function as expected. Safari drops all cookies from a different domain in an iframe.
You can test this... clear your history and try a webpage that has the iframe (different domains for parent and iframe)... then load the iframe directly as a the parent page and use it... then go back to the original site and the iframe will work as expected.
I have found other applications that generate an iframe by JavaScript and the iframe keeps the data stored somehow with cookies.
I'm working on my first jQuery Mobile site, which is a (prototype for) a Location Based Game in Brisbane, Australia: www.jsjensen.dk/soleil/
My question is based on viewing from a mobile device, but a desktop device have very similar problems. I have tested with Chrome and Safari on iPhone, iPad, and Mac. Same problem everywhere.
I think it's related to how jQuery Mobile loads and displays pages, but I'm not using multiple pages in one HTML document, but have multiple HTML document.
If you go to the website above and then click "QUESTS" in the menu, followed by "Stairway to Knowledge" you will end on /soleil/quest01.html (desktop) and /soleil/#/soleil/quest01.html. That "#/soleil" really confuses me!
In this first try the JavaScript for handling answers in the text input is not loaded. That means nothing happens when you press "Unlock".
Now, if you reload on desktop or edit the address on iOS to /soleil/quest01.html (which is the actual and real file) it will reload the page with the right JavaScript loaded and initialized.
Now I'm able to go back (pressing "QUESTS" in the menu) and then go to another page (e.g. "Citadel of Fun") with the same problem: the JavaScript not loading. If I go back to the other one ("Stairway to Knowledge") the JavaScript is, however, still loaded and working just fine.
So what happens here? I'm pretty sure my linking/coding is correct, but it's just a basic understanding of jQuery Mobile that I'm missing. Can I change something to make this work? It could really be awesome!
So, I found a way to fix it, but not really a solution to the original problem.
I've added rel="external" to the tags pointing to the pages where I had problems. In this way it will not use the AJAX system to load these pages, but do it in a regular way. This solved my problem, but now I can't make any fancy transitions.
I create simple image slider, using jQuery. Tested on all browers. All works fine, but not in WinXP Safari. When i open another tab and load other website, and then focus again on my jQuery slider website tab - Safari crashes. Its happend only when my slider website actually animate images using fadeIn effect. When i try to switch tabs on my site, Safari crashes. I find what causes that, but not find an solution to the problem. Problem is probably with window resize and functions defines of dimensions of images and DIVs. And/or maybe setInterval function. I find many websites with different javascript and jQuery scripts with the same problem and no solutions (i.e. http://www.jssor.com/demos/banner-slider.html).
I find solution. Problem disappeared when i start script from:
$(window).focusout(function() {
if (navigator.userAgent.indexOf("Safari") > -1) {
location.reload();
}
});
I hope, that will help in some other problems with Safari.
I'm a Chrome user and would be lost without Firebug, but one issue has always annoyed me. Namely, the fact that the Firebug console doesn't appear below the site you're viewing (ie the way it behaves in Firefox). Instead, the console sits above the site, obscuring the footer and content. It's a little thing but annoying all the same.
I understand that this is because of the way Google restricts Chrome extensions but is there a way around this particular issue?
I haven't found a solution anywhere. So, with some help from other stack overflow threads, I came up with a very simple function and as I couldn't find much about this, I thought I'd post it here for anyone with the issue.
I'm not a JavaScript programmer, but I do use jQuery. As such, I run this inside jQuery's ready method. Once the site has loaded, it'll check to see if Fire bug is open, if so, it simply adds a 400px bottom margin to the body. Obviously, if your console is bigger/small than that, just change the size inside the jQuery code.
It won't however change anything if you open the site and then open Firebug. It's nothing major, just open Firebug then refresh the page an it'll work.
// add body margin if firebug is open
if (console.log.toString().indexOf('apply') != -1 && navigator.userAgent.toLowerCase().indexOf('chrome') > -1) {
$('body').css('margin-bottom', '400px');
}
Hopefully this will be of use to somebody.
EDIT:
WARNING: This can possibly cause your jQuery to stop working in Internet Explorer. So, just remove this if you find that your jQuery doesn't work.
Instead of modifying your webpage's CSS code which may have adverse effects, you should just detach Firebug Lite in Chrome, then position that popup window under the resized Chrome browser window.
To perform this, just press the center button in the Firebug Lite window located at the top right corner.
Right-click the image below and view in full size if that helps:
Open Image in New Tab / View Image
This way, you'll have two separate areas that don't overlap yet play nicely together.
Per Stan's comment above... about what does Firebug Lite provide extra when compared to native Chrome's Developer Tools, I would have to say it provides familiarity and a great DOM Tab that Chrome lacks.
More importantly thought, you can actually use BOTH consoles at the same time.
This allows easier monitoring of two different panes and with a multi-monitor setup this can be a useful scenario. Even with a large monitor things look good.
Right-click the image below and view in full size if that helps:
Open Image in New Tab / View Image
I have a facebook app run inside an iframe. The problem is that if I have a smaller browser window, I scroll to the bottom to the app's page list and select a new page, it will open in the iframe also in the bottom.
I tried to add a #top to the links, linking to a name="#top" element inside the new page, but this doesn't work on Firefox (verified) and supposedly IE(not verified yet).
For Firefox, I understood it's a known issue and there are some workarounds to make a "scroll to top" link work, BUT I haven't found any solutions on how to open a new link inside the iframe and make it scroll.
I added a onload="location.href='#'" to the body element of the iframe and still no success.
Whatever I try, it seems to be ignored by Firefox.
Did any of you encountered this problem before? If so, can you spare some advices, please?
Thanks
You could try a "ugly" workaround using http://api.jquery.com/scrollTop/
As a Facebook-developers, I am curious. How do you resize the app-iFrame during runtime? I have a few ajax-based apps, and after every ajax-call I resize the window, eliminating this problem.
Might worth taking a look into.
Feels weird to answer my own question, but hopefully this will help others.
In the end, what did the trick for me was Facebook's scrollTo function: http://developers.facebook.com/docs/reference/javascript/FB.Canvas.scrollTo/
I still don't know if it works on IE, since I haven't tested it yet, but on Firefox everything is ok now