Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
lifeto

top.document when using GS in an iframe.

Recommended Posts

when i was trying to create a website that uses jquery to link numerous iframes,

jQuery('.open_contents').click(function() {
jQuery('.board_contents').addClass('slideIn');
})

I found out that iframe cannot communicate with the parent window, and i was able to solve the problem with the following code by adding 'top.document'

jQuery('.open_contents').click(function() {
jQuery('.board_contents', top.document).addClass('slideIn');
})

 

 

but simply addingclass or togglingclass was not good enough for creating the animation that i wanted, so i moved onto Greensock.

the question is how do i control specific div layer in the parent window, using greensock by clicking on a button inside an iframe?

my code is this :

jQuery('.open_contents').click(function() {
TweenMax.to(".board_contents", 0.5, {opacity:1, top:200, ease:Bounce.easeOut});
})

 

 

my webpage is this : http://lifeto.dothome.co.kr/xe/page_FIsv96 and here is where i am.

if you click on the first 'click me' button a board slides down, and then it was supposed to open a layer named '.board_contents' when click on the title '1', but is currently not working.

do excuse my horrible english.

Link to post
Share on other sites

Hello lifeto, and welcome to the GreenSock Forum!

 

I am assuming that both the parent of the iframe and the iframe itself are both the same domain and protocol source. If so..

 

Then you can try using  parent.document  instead of top.document

 

https://developer.mozilla.org/en-US/docs/Web/API/Window.parent

 

if they are not of the same origin and domain then you can take a look into window.postMessage on the Mozilla Developer Network page if the browser supports this HTML5 method for safely enabling cross-origin communication:

 

https://developer.mozilla.org/en/DOM/window.postMessage

 

See if that works for you!

  • Like 2
Link to post
Share on other sites

Hello lifeto, and welcome to the GreenSock Forum!

 

I am assuming that both the parent of the iframe and the iframe itself are both the same domain and protocol source. If so..

 

Then you can try using  parent.document  instead of top.document

 

https://developer.mozilla.org/en-US/docs/Web/API/Window.parent

 

if they are not of the same origin and domain then you can take a look into window.postMessage on the Mozilla Developer Network page if the browser supports this HTML5 method for safely enabling cross-origin communication:

 

https://developer.mozilla.org/en/DOM/window.postMessage

 

See if that works for you!

 

Thanks for the reply.

 

but I do not know how to apply parent.document to the current coding of mine.

 

jQuery('.open_contents').click(function() {

TweenMax.to(".board_contents",parent.document, 0.5, {opacity:1, top:200, ease:Bounce.easeOut}); 

 

})

 

 

obviously this doesn't work, can you give me the specific code I can use?

 

Sorry, my understanding of jquery and greensock is very limited.

Link to post
Share on other sites

Can you please provide an example of the code you have tried? Here is a nice video tut by GreenSock on how to setup a codepen example demo. So this way we can see your code in context in relation to what you have tried so far.

 

Thanks! :)

Link to post
Share on other sites

http://lifeto.dothome.co.kr/xe/page_FIsv96

 

on the page above, if you click on the 'click me' button, a board pops up and basically I want '.board_contents' layer come down from the top when i click on the titles.

 

in this case, clicking on the title( the numbers 1,2,3) doesn't work because it is iframed, and cannot send data to the parent window.

 

 

im afraid i cannot test my codes using codepen, because there has to be an iframe to test what i want to achieve, but I put everything in the codepen below except for the button inside an iframe.

 

if anyone requires my further dedication in order to test my codes, i am willing to upload an iframe with a button on my personal webhosting to make it more easier, though even then, we won't be able to test any code right off.

 

See the Pen WbXpaK by lifeto (@lifeto) on CodePen

Link to post
Share on other sites

If both your iframe and the iframes parent part are part of the same domain? then If so.. then have you can look into using AJAX to fetch the '.board_contents' layer html and insert it into your page.

 

You can use AJAX to either grab another page or parts of the html and elements within that page, and bring them into your main page.

 

You could try using jQuery ajax() : http://api.jquery.com/jquery.ajax/

$.ajax({
  url: "example.html",
  data: { /*data*/ },
  success: function(myData) { /* Do work with myData  */ },
  dataType: 'html'
});

:

or the shorthand ajax load() method : http://api.jquery.com/load/

// this gets a html fragment in external-file.html, finds the element #Content
// and inserts it into the existing pages #targetContainer element
$("#targetContainer").load("external-file.html #content");

:

More information can be found on the above links for jQuery. The reason I advise to use jQuery for AJAX is because it provides cross-browser helper methods for AJAX.

 

Your question is really not a GSAP question. But i'm sure if you do a search in Google or StackOverflow you can find what your looking for. Since what you are after will require much more time to set up,  which is outside the scope of support here, which should really be focused on GSAP.

 

StackOverflow - Loading page framents with Jquery AJAX

 

Again I'm sorry i could not be of more help, but we have to stay focused on GSAP related support... unless anyone else would like to offer other solutions :)

Link to post
Share on other sites

I just want to chime in to support what Jonathan has said. This unfortunately goes beyond what we have the resources to support. Jonathan has provided some information that should get you in the right direction, but this is not the sort of thing we can effectively play with as 

 

  1. we don't have access to your code and testing environment to see and trouble shoot errors
  2. it is not at all related to GSAP

My advice would be to step back from GSAP and get onto Google and figure out the best way to communicate between an iframe and its parent window. Do some tests where code in your iframe modifies elements in the parent window (change the text, apply a new css style). Only once that is working should you really worry about the animation.

 

Wish I had better news for you. iframes are historically problematic and they have a lot of security restrictions. We just can't go further down this path.

  • Like 2
Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.

×