I'm trying to capture where the user clicks on the hole page but from an iframe inside an iframe.
so basically I can control where the user clicks on the 1st iframe from the 2nd iframe, but can't control where he clicks on the root document.
I've tried nearly everything and can't find an answer.
Here is my actuall javascript:
$(window, window.parent.document).document.click(function( event ) {
alert(event.target.nodeName );
});
for context, I'm using shadowbox as iframes and my objective is to control when a user clicks outside of the shadowboxes
$(window).document in itself already returns undefined, you would need to de-reference the jQuery object first to get the "DOM version" of window, $(window)[0].document
But turns out you can simply use $(parent.document, parent.parent.document).click()
That also kinda seems to be the most straight forward way to me.
(Don't know why top.document did not work, because that is always the topmost window instance, so from within an iframe-inside-iframe that should be the same as parent.parent.document ... or are there even more (i)frames involved, another level? Anyway, as long as you got something that works it doesn't really matter.)
Related
This question is based on a misconception, please see this question instead.
Subject
I am trying to create some context menu options via a Google Chrome extension that allow you to modify the contents of editable fields on certain web pages. My extension works perfectly on StackOverflow, where the DOM is nice and simple, but Youtube has been giving me trouble for some time now.
Problem
Many of the editable fields on Youtube are hidden in Iframes, so if I try to access document.activeElementfrom the top frame, I get the Iframe itself.
I am trying to get around this by injecting chrome.runtime.onMessage() listeners into every page.
Then, I can presumably compare the value returned by info.frameURL in the chrome.contextMenus.onClicked() event listener in the event page, with window.location.href in the content scripts to see if the message is addressing the correct frame or not. (See this question)
The problem is that the value returned by info.frameURL does not seem to be consistent.
For example, if you go to the home page and use the main search box as the test element, sometimes the value is simply, www.youtube.com...., but other times it is plus.google.com..... or apis.google.com..... or accounts.google.com... and I am not sure why this is.
Can someone explain why the value returned by the info.frameUrl would not remain constant each time you click the same frame?
Is it possible to prevent iFrame element to get focus or if not, at least to return focus instantly to parent window once such iFrame gets focus? Please advise with code example.
It depends upon what you're really trying to accomplish and which focus methods you are trying to prevent. There's no magic setting you can set that prevents focus going to an iframe.
You can put a transparent element over the top of the iframe and have it capture all clicks so nothing in the iframe is clickable. You can likely just position this with CSS and wouldn't necessarily need javascript unless the iframe size is dynamic or not known in advance. This won't prevent javascript code from setting focus to the iframe, but will prevent mouse clicks from moving the focus to the iframe.
You can regularly check (javascript polling) where focus is and if it's not in your own document, then put it back in your document. This is kind of a hack.
Here's a demo of the first option: http://bit.ly/10jzdlp
If the problem that you're encountering is due to script in the iframe's document focusing one of its element, then one solution may be to use the iframe's sandbox attribute to prevent the iframe's document from running script (that is, setting the attribute to a value that does not contain the flag 'allow-scripts'). Whether that's acceptable will depend on whether it will break other things, of course.
I'm trying to find out how gray the area is for the "Same Domain Policy". What I want or need to do rather is pass a handful of variable from my iframe element to the parent window with javascript/jquery some how.
Now a little pretense on it. I have a product I am working on collaboratively and part of the product is set off from the rest in a sub domain. Lets say abc.domain.com. Which when needed while on the main product www.domain.com (domain.com) I click a link which opens a layover that contains an iframe to abc.domain.com which for all general purposes this works fine. However. Upon doing whatever actions I need in the iframe layover element I want to send parameters to my main page so I can set them accordingly and then trigger the layover to close.
My problem is either I haven't figured out how to properly pass variables like this from iframe to parent window, or I am being walled off by the "Same Domain Policy". Which is the case I don't know. But.. in either event I know where theres a will theres a way. And someone has to have figured out how to do it in either case. So that said.. can anyone throw me a bone?
I have been writing a browser based application (or rather, rapid prototyping an application) using HTML and Javascript. I would like the main window to be able to display popup windows with dynamic data. However, I cannot figure out how to push data from a parent window to a popup window in Javascript. Note, I am working with the assumption that the application may be used in "offline" scenarios, so all dynamic data should be coming from the main window.
Ideally, I'd like to write
var popup = window.open("popup.html", someidentifier, "");
popup.document.getElementById("SomeIdInPopupHtml").innerHTML = "1,2,3,4";
However, the getElementById function returns NULL. How can I push data to popup windows from a parent window?
Is the popup serving content from a different domain than the parent? If so, the short answer is you can't.
The long answer is that you can sent the popup's href fragment (i.e. the part after the # in protocol://server/path?query#fragment). If the content in the popup knows to check its fragment for changes, then you can pass data to it.
If it's from the same domain then your code should work, as long as an element with that id exists.
However, the getElementById function returns NULL.
Because popup.html hasn't loaded yet. If you want to interact with content from the document, you'll have to call back later when it has finished loading.
For completely dynamic popups, open them with a blank URL and popupwindow.document.write their content into them. For co-operatively-scripting popups loaded from a separate document, have the child document call its parent when it is ready to be accessed. Or just use in-page pop-up divs which are typically less annoyance, both for you as a coder and for the end user.
Let me start off by presenting a possible solution that I just experimented with. I would like to encourage feedback and better solutions, however...
Its not very neat, but I can append GET-style query parameters to the source URL of the popup:
var popup = window.open("popup.html?" + identifier, somename, "");
Now in my particular situation, the popup is a view to some model identified by a unique ID, so the popup window can ask for the parent window for data related to that ID:
var model = window.opener.getModel(document.location.href.split("?")[1]);
do_something_with_model(model);
This strategy won't work in all cases, especially when the data is not easily marshaled into the getModel() implementation. However, in my case, I think this approach may work.
I'd appreciate feedback on this strategy. Thanks!
When the user clicks on your link to open the popup window pass a query string to it and then react to that value with your server side code.
I found a JavaScript error in a script that I'm developing. I whittled it down to a pair of fairly concise pages that still produce the error:
http://troy.onespot.com/static/4505/index.html
http://troy.onespot.com/static/4505/iframe.html
If you load the first page in Internet Explorer 8 (or probably 6 or 7, for that matter), give it about half a second to run the script, then click the "Google" link inside of the <iframe>, you should see an error message appear:
http://skitch.com/troywarr/dui21/ie8-error
(You may need to uncheck Tools > Internet Options > Advanced > "Disable script debugging (Internet Explorer)" and check "Display a notification about every script error" two lines below to see the error messages.)
Starting the debugger shows the beautifully insightful message "Object required":
http://skitch.com/troywarr/dui26/ie8-debugging
The culprit is the line:
target = event_object.target || event_object.srcElement;
I think that's valid code - at least it works in Firefox. My best guess is that there is an issue with trying to access the Event Object of one frame from another - vaguely similar to why you can't rely on instanceof to detect arrays if they were created in a different window/frame (search for "context" at http://javascript.crockford.com/remedial.html if that didn't make sense).
Does that sound like a valid theory? If so, what can I do to fix this? If at all possible, I need to preserve the same general code structure/functionality:
There is a link inside an <iframe> on a page.
A script in the <iframe> calls a function on the parent page, which attaches an event handler to the element in the <iframe> with the specified id attribute.
Clicking that <iframe>d link triggers the event, which calls a function on the parent page, passing the Event Object by default.
The function on the parent page determines information about the clicked element (the <a>) from the Event Object in a cross-browser-compatible way.
I would also like to continue using event delegation, and keep all of the functions in the parent document, just calling them with arguments from the <iframe>d document. However, if you have any suggestions for alternative approaches, I'd love to hear them.
Thanks in advance for any help! Please let me know if you need any more explanation about my requirements or what I'm trying to do - I'm hoping that there's just a better way to access or pass the Event Object that I'm not aware of - an "Oh, yeah, you just need to do it like this" kind of solution. I hope that's not wishful thinking. ;-)
Easily fixed. You need the event object from the iframe's window. Store the iframe's window object next to where you store its document:
var iframe_win = document.getElementsByTagName('iframe')[0].contentWindow;
... and update the line that gets hold of the event object in your event handler function:
event_object = event_object || iframe_win.event;