Jump to content
GreenSock

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

How do I transfer gsap to an iframe?

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?

Share this post


Link to post
Share on other sites

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). 

  • Like 2

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
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. 

Share this post


Link to post
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

Share this post


Link to post
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

Share this post


Link to post
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

Share this post


Link to post
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

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.

×