We're making changes to the Community, so you may have received some notifications - thanks for your patience and welcome back. Learn more here.
Forum Discussion
Dynamically load iframe with embedder js
Hello,
I am adding Dropbox iframes to my web app via the Embedder. To keep the site performant, I only render the anchor tags referencing embed urls when they are visible in the viewport, at which point I inject the dropin JS script.
Instead of injecting another script when an additional iframe comes into view, I would like to use the existing window.Dropbox object to load the iframe corresponding to the newly rendered anchor tag url, however I am unsure how to do this with the Dropbox or Dropin objects or if it is even possible! Can you provide guidance on how I might do this or if it is even possible?
Thanks
I see, thanks for clarifying. No, I don't believe there's a way (at least not officially supported) to trigger that for newly created anchor elements like that. For dynamically creating embedded content, you should use the "Triggering the Embedder using JavaScript" method, instead of "Embedding Files or Folders using anchor tags", from the documentation. That will cause the Embedder to be loaded when you call Dropbox.embed, and you would only have to have loaded the script once, no matter how many times you call Dropbox.embed.
- Greg-DB
Dropbox Staff
I'm not quite sure I understand the scenario. Would you be able to share a sample and/or some relevant code and any error/output of whatever you have so far?
In general though, you should only need to load the "dropins.js" once per page, so you may want to set/use some local variable to indicate if you've already loaded the script, or you can directly check if 'window.Dropbox' already exists, if that works in your case.
Hi Greg,
Sure thing. So when I load a page, I may have a single Dropbox embed in the DOM and visible in the viewport like below
<a className="dropbox-embed" data-app-key={DROPBOX_APP_KEY} data-height="400px" id="dropboxjs" href={"https://www.dropbox.com/s/file-1?dl=0"} ></a>I then inject the dropin script https://www.dropbox.com/static/api/2/dropins.js which is loaded async and once loaded, updates the DOM so that the anchor tag becomes an iframe that loads the file viewer.
At a later time, another Dropbox embed is dynamically added to the page (for example, by the user scrolling the page to see more content) and the anchor tag is not automatically replaced by an iframe unless I inject another dropin script into the DOM. Is this expected? Or is there a way to use the window.Dropbox object to convey that I have added another embed and the script needs to load the iframe?
- Greg-DB
I see, thanks for clarifying. No, I don't believe there's a way (at least not officially supported) to trigger that for newly created anchor elements like that. For dynamically creating embedded content, you should use the "Triggering the Embedder using JavaScript" method, instead of "Embedding Files or Folders using anchor tags", from the documentation. That will cause the Embedder to be loaded when you call Dropbox.embed, and you would only have to have loaded the script once, no matter how many times you call Dropbox.embed.
About Dropbox API Support & Feedback
Find help with the Dropbox API from other developers.
