I have an iframe which contains a few select drop-down lists for data entry. I recently began noticing that mouse-clicking the select element in the iframe, the drop-down list doesn't expand. The user can click on the drop-down to set focus on it, and then scroll through the contents using up/down arrow on the keyboard, but clicking the arrow button beside the list doesn't cause it to expand & show its contents.
The parent page this frame is embedded on resides on a different domain. Initially I thought this might have something to do with javascript onfocus events within the iframe. I stripped out all of the scripting, got rid of all of the css and pared it down to a simple static html parent with a simple iframe page of static html containing just a select element. When run on the same server, the dropdown behaves normally, but when the parent page resides on one domain, and the iframe content on another, the select list cannot be expanded.
This problem only seems to occur in IE7. I've tested in IE8 & IE9 without any problems, as well in Safari, Chrome & Firefox. I found a couple of blog posts (links below) that cropped up within the last week that seem to be running in to the same problem, but no resolution.
http://johannes.jarolim.com/blog/2011/10/20/internet-explorer-cross-domain-iframes-and-unusable-select-boxes/
http://scrumpy-jack.com/post/11177166236/html-select-crazy-egg-ie-and-iframes-updated
Has anyone found a solution to this problem?
We put in place a workaround for this issue by swapping out the standard drop down menus with JQuery drop downs for IE7 users only. We developed a script and dropped it between some IE conditional tags.
We couldn't wait for MS to issue another patch!
Apparently this bug is due to a security update that was just released (2586448):
http://support.microsoft.com/kb/2628724
Related
I'd like to point the developer tools at a specific iframe within a document. In Firefox, there is a button in the toolbar. In Chrome, I found this:
But I don't know how to use this feature in panels other than the Console. In Firefox, "If you select an entry in the list, all the tools in the toolbox - the Inspector, the Console, the Debugger and so on - will now target only that iframe, and will essentially behave as if the rest of the page does not exist."
How to inspect elements in an iframe as if the rest of the page does not exist? I need to see how the iframe fits in the parent page, but don't want to see the elements of the parent page in the Elements panel (because of the depth of the elements).
One possible workaround is to enable the still-in-development Out-of-process iframes (OOPIF) using chrome://flags/#enable-site-per-process flag:
A new devtools floating window will open when an iframe is inspected via rightclick menu.
To inspect a youtube-like iframe with a custom context menu just rightclick again on that menu.
IFRAME contents won't be shown in the parent Inspector since it's in a different process.
You may want to do it on a separate installation of Chrome like Canary or a portable because the feature breaks iframes on some sites (these flags affect the entire data folder with all profiles inside).
The section which is in between the horizontal navigation bar and the "Schedule" in this site is built as a Google gadget.
When I navigate through pages of this site on Chrome and use the Chrome's BACK button to come back to the home page, the gadget completely disappears most of the time. The same thing happens with the FORWARD button as well.
When I inspect the DOM tree when the issue is active, I see that the iframe element of the gadget is there but its DOM object (html section) is null. If I reload the iframe or refresh the page, the gadget appears.
The gadget is hosted in Github here (abva.xml file).
This site works perfectly fine on all other browsers. I have been fighting with this for many days with no avail. I am pretty new to Gadget development. I will truly appreciate if someone could help me resolve this issue.
Thank you
The issue was resolved when an HtmlBox gadget with a div in it was inserted before my gadget. I made the div empty and set its width and height to zero so that it wouldn't make any visual impact. I don't have a logical explanation for this solution though.
I'm new to chrome extensions development and I'm building one that requires a side panel (not the popup), like firebug but on the right side.
I'm using jsTree (with json_data) in the side panel and I want to drag elements from the webpage to the side panel.
So far, to create the side panel, I've used a div appended to the body with a z-index so that it appears above the webpage, but the elements' styles in my side panel are altered because of the website's css.
So I thought I could use an iframe to avoid any css incompatibility within my side panel.
I create the iframe dynamically, with a src="chrome-extension:///page.html".
I've managed to make my jstree work fine in my iframe by loading the jquery+jstree scripts directly in the iframe's source page... that's pretty bad but I can't get the content script to be used for the iframe's source page (despite "all_frames": true).
I'd like to drag elements from the website's page into jstree in the iframe...
I've found the iframeFix: true and refreshPositions: true, but that doesn't seem to change anything...
Anyone knows how to do that?
If I don't use an iframe, according to the multiple examples on the web, I can easily drop an element to the jstree using the dnd plugin.
I haven't tried it; even if it worked, the css in my side panel will be altered and I can't let that happen.
I've seen the "div layer above the iframe" technique. I can successfully drop an element from the webpage on that div above the iframe.
But, when I try to post a message (containing the dropped elements' data) to the iframe through a port the iframe doesn't receive the message.
My idea in this case is to somehow add the message to the json data of jstree.
I've read all the posts I've found about content_scripts and iframe, I know about the bugs... I can't figure out if it's fixed or not, and if it is, I don't know how to make the port communication between the ifram and the content script work.
Anyone knows more about that?
I should also add that when I try to communicate between the content script and the iframe using a port, and copy the listener from the iframe in the background page, the background page receives the message just fine... which just means that the port communication is working fine I suppose, but not between the content script and the iframe...
Any thoughts? I'm really stuck
answering my own question;
I haven't found a solution on how to use iframes in a chrome-extension with jstree.
I'm just going for the hardcore way; append a <div> to the <body>, and make sure by doing a lot of testing that the css inside my <div> will remain isolated from the webpage's css.
Cheers
Here is the source:
http://store.bionoricausa.com/index.aspx
All good in FF and Mac browsers.
In IE8 developer mode, the 3 divs immediately below div id="footerIn" are shown being recreated a second time, resulting in a repeating footer.
This is with Compatibility Mode off.
When it is on, the repeating problem is gone, but the header logo is missing.
This page is a port of a WordPress site as home page to a Network Solutions e-commerce site. As you probably know, NS auto-generates a container and table around the header, body, and footer content, interfering with any of your own containers that you may have used in another CMS. I suspect this is most of my problem, as I've had to develop workarounds to display parts of the page properly to match the original WP site. But no matter how I rearrange the footer code, I can't get IE8 to stop doubling it.
Any help would be GREATLY appreciated. Thanks in advance!
Without going through all your markup, I can say I've seen this kind of problem before on IE and it's typically caused by: a tag that wasn't closed, tags that weren't nested propertly, or an extraneous closing tag somewhere. That's where I would start first.
It was the fact that there was a search form in the footer tag - Network Solutions creates a form, container, and table to put the whole page in, so the search form that was part of the page I imported from WordPress wouldn't work (you can't have a form within a form). That is what IE objected to. The nested form caused all the footer tags to go haywire in DW, but DW didn't highlight the form as being a problem at all, just all the divs around it...
Thanks kinakuta for your help.
In my (school) website we use Iframes to display class blogs (on blogger). This works well EXCEPT if the user then clicks on (say) a photo inside the iframe. Blogger (in this case) then displays the photo in the whole browser window and the back button loops; that is if the back button is hit, the browser (IE, FF, Chrome) stays on the same page. The only way out is for the user to jump back two pages (which many of our users don't know how to do).
I've read a lot of posts on back buttons and iframes and there doesn't appear to be a simple solution. Bear in mind that I don't have control over the iframe content (so no embedded back buttons in the frame are possible). Ideas anyone?
The solution I would use would be to loop through the iframe content after it has been loaded and set target attributes on links in the iframe so that they open in either the iframe, or in a new window. Here's an example using jQuery:
$('#iframeID').contents().find('a').attr('target', '_blank');
You could do something similar using a loop and DOM methods, I'll post some code to do that if your not sure how to go about it.
EDIT: can't access the content if its cross domain, so this wouldn't work in this case