Jump to content
Search Community

How do I transfer gsap to an iframe?

qqignatqq test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

 

Hello. I have a site, I have an iframe site with the same domain name. I don't want to load gsap twice. In order to send jquery to an iframe I use this code:
 

   var iframeBody = document.getElementsByTagName("body")[0];
    var jQuery = function (selector) { return parent.jQuery(selector, iframeBody); };
    var $ = jQuery;

How to pass gsap to iframe?

Link to comment
Share on other sites

14 minutes ago, GreenSock said:

If you're pointing to the same URL to load GSAP, the browser will only load it once anyway because it'll tap its cache for it. There's no point in trying to manipulate iframes like that (unless I'm misunderstanding your question). 

No. Alas. I checked it on the image. If you put the image on the site and place the same image in the iframe, it will be uploaded 2 times

Link to comment
Share on other sites

3 minutes ago, GreenSock said:

Are you loading the image from the exact same URL? I'm also confused by "uploaded 2 times" - did you mean "downloaded"? 

I'm sorry. Translated with deepl and didn't read what he translated. Yes, I meant "downloaded 2 times". In Russian "downloaded and uploaded" - consonant. 

Link to comment
Share on other sites

Do you have a reduced test case that proves this? I can't imagine why a browser would not use its cache in a scenario like this, but maybe you can show me the evidence you're looking at so we can better understand? 

 

Are you loading the GSAP file from a CDN? 

 

In all my years of doing this (and GSAP is used on over 8,000,000 sites), I don't think I've ever heard someone bring this up before. I wonder if there's a setting on your particular browser that's disabling the cache? 

 

What you're doing with hijacking the child iframe's jQuery (and GSAP) smells like a potential security violation, but that's not my area of expertise. 

  • Like 1
Link to comment
Share on other sites

No, I don't use a CDN. I download the scripts I need and place them on my hosting via <script src="js/jquery-3.2.1.min.js"></script>. On the screen you can see that the TweenMax.min.js file was downloaded 2 times. Even if I use the CDN, the file (if it hasn't been in the cache before) is downloaded twice.

 

 

Снимок.PNG

Link to comment
Share on other sites

1 hour ago, qqignatqq said:

I download the scripts I need and place them on my hosting via <script src="js/jquery-3.2.1.min.js"></script>.

 

You may need to use a fully qualified URI for caching to work, but this is a server question, and you will probably get a better answer on StackOverlow.

https://stackoverflow.com/

 

Also, caching.

https://developer.mozilla.org/en-US/docs/Web/HTTP/Caching

 

  • Like 1
Link to comment
Share on other sites

If the file has ever been downloaded, yes: it will be cached and will not be downloaded twice. But if earlier this file in a cache was not present, it will be downloaded 2 times.  

StackOverlow won't help me, because it's a gsap question.

There are a lot of users in the world who don't have tweenmax in their cache and they will have to download it twice.

With jquery, the problem was solved and I showed the code to solve the problem from the first post. How to do the same for tweenmax?

Translated with www.DeepL.com/Translator

Снимок.PNG

Link to comment
Share on other sites

58 minutes ago, qqignatqq said:

With jquery, the problem was solved and I showed the code to solve the problem from the first post. How to do the same for tweenmax?

 

Then do the same thing. GSAP classes will be on the parent from inside an iframe.

 

var box = document.querySelector("#box");

window.parent.TweenMax.to(box, 1, { x: 100 });

 Depending on how deep your iframe is, you may need to something like window.parent.parent...

 

  • Like 3
Link to comment
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.
×
×
  • Create New...