Doesn't work cross-document

[adam-lynch]

Let's say I have an iframe A with jQuery, atwho, etc. and an iframe B with just HTML & CSS (incl. the atwho CSS).

In my first iframe I can do stuff like $(selector, iframeB.contentDocument) which will use the other iframe's document as context. Works perfectly.

This doesn't work: $(selector, iframeB.contentDocument).atwho().

But this does: iframeB.contentWindow.$(selector, iframeB.contentDocument).atwho() (assuming I now have to load jQuery & atwho in the other iframe).

I don't know exactly why. It seems to be assuming the window/document is the current window/document. It might be parts like https://github.com/ichord/At.js/blob/master/dist/js/jquery.atwho.js#L789 where maybe it should pass the same context I passed to $(selector, iframeB.contentDocument)?

I tried looking into it but I can't seem to find out how a plugin can access which context was originally passed.

[adam-lynch]

Might be able to get this.context inside $.fn.atwho and use that everywhere then?

[ichord]

Try to set the iframe to atwho by using setIframe API.

[adam-lynch]

I didn't notice this at first & tried playing around with it last night.

Could you explain it a little further? Is jQuery needed within the frame? What's needed within the frame?

Does this work if the target iframe is not within the document? I've a setup like:

document
- iframe calling atwho
- iframe with target textarea

[ichord]

oh. sorry that i didn't get what you had said.

setIframe API is for editors which use iframe. look like:

document calling atwho
- editor iframe with target text field.

It doesn't need any js or css in that iframe context.

And atwho's view, the dropdown menu, have to work in current document which in your cases is iframeA.contentDocument. If iframeA is invisible, you can't see the view.

so, I think, you are right, it doesn't work with sibling document.

I'm so curious about why you do this?! It is so strange, at least, i think.
And if it's a special use case, At.js might not going to support it.
At.js would has to maintain two document context.

[adam-lynch]

I'm building something that involves third-party JS. So someone puts a snippet on their page, this snippet injects a "main" (hidden) iframe, which controls everything, including the injecting other firames into the parent webpage, it has a view model which the other iframes' html is bound to (two-way data-binding), etc. Think Disqus / Facebook's like button / etc. but with multiple iframes.

So, all the JS is in this main iframe and the other have HTML & CSS. I really don't mind having HTML & CSS for atwho in the other iframes (there could be many of them), but I'd like the JS in the main one. So the main one could inject the iframe and set up everything like atwho within the iframe.

I was suprised that you put the HTML & CSS in the document calling atwho and overlay it over the iframe anyway, seems strange. Like, it makes sense to me that it would belong to the inner document.

---

Where you do things like https://github.com/ichord/At.js/blob/master/dist/js/jquery.atwho.js#L789, I think it should inject the container into the target iframe.

I'm not sure how you'd handle CSS though, whether you just tell users that they need the CSS in the iframe or you'd inject the CSS into the iframe in your plugin.

[ichord]

I was suprised that you put the HTML & CSS in the document calling atwho and overlay it over the iframe

1. It's the easiest way that i can find out to do that with different editors for now and it work fine.
2. How to handle CSS is a problem.
   I'm trying to make it easier to setup without caring about the CSS too much, for you may have to find out how to put it into editor.
   I don't want to hard code it in HTML elements. Maybe someone want to customize it.

And these is base on embed iframe editor in current document. Because this are the use cases that i know so long.

But, i agree with you and thanks your explanation.
For CSS, It's better to just tell users to do that.
For the API, let me think about it.
I would be very happy if you can give me some suggestion. 😃

[adam-lynch]

What if in $.fn.atwho you get the context passed to $(selector, documentContext).atwho(), save it and pass it whenever you're doing something like $('body').append? (Would be $('body', documentContext).append). I think you can get the context from this.prevSibling.get(0) (either it is the document or you get its ownerDocument).

I'm not if that will fix it completely, I'm not 100% sure why it doesn't work as is, there may be more problems than just that.

[adam-lynch]

By the way, I agree about customizing CSS, etc.

[ichord]

call setIframe and then try to use https://github.com/ichord/At.js/blob/master/dist/js/jquery.atwho.js#L33 to do that.

I have to make it compatible by adding a flag such as setIframe: (iframe, deep: true)

[ichord]

And Have to use the specified document every where.
I will try to fix it tomorrow, it's at night where i am. ;)

[adam-lynch]

Thank you 👍

[ichord]

check out the example in examples/cross_document.
It work now! but not tested in IE, I don't have an IE.

[ichord]

http://ichord.github.io/At.js/examples/cross_document/

[adam-lynch]

Thanks so much for doing this! Seems like it does what I need (assuming that it'll work if I use a textarea in the viewFrame instead).

Did you notice that <div id="atwho-container"></div> exists in the body of both iframes?

[adam-lynch]

Ok, to use it with a textarea I had to do:

$(textareaElementInsideViewFrameDocument).atwho('setIframe', viewFrame, true).

It seems to work except for the positioning and displaying of the div.atwho-view. In my use case, it was giving that display: none and really large top & left values (maybe relative to the outer document?)

[ichord]

I have had a try, and it still work in the example.
show me what is your codes look like, if you could.

[adam-lynch]

I'll create an example repository when i get a chance.

[adam-lynch]

Ok, I've created adam-lynch/atwho-cross-document-test which shows the problem.

Atwho is auto-ran but you won't see it because the positioning is off. You could just open dev tools and inspect the div.atwho-view element. I also log the offset in the top right of the target frame (gotten from before_reposition)

[ichord]

You are using the wrong version of Caret.js.this depends on it, which still live in master branch.

[adam-lynch]

What? It's using the bower.json from the cross-document branch. Is it incorrect on that branch?

[ichord]

yes. The Caret.js is in the master branch and not be released yet.
checkout the my example, https://github.com/ichord/At.js/blob/cross-document/examples/cross_document/dataFrame.html#L6

[ichord]

I have to change caret.js to support it.

[adam-lynch]

Yep, that seems to fix it (adam-lynch/atwho-cross-document-test@820fcf4) 👍

[ichord]

cool. I will merge and release it later.