You might see that the Dropbox Community team have been busy working on some major updates to the Community itself! So, here is some info on what’s changed, what’s staying the same and what you can expect from the Dropbox Community overall.
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 wh...
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
Dropbox StaffI'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.
Alright, thanks for clarifying Greg. I went ahead and refactored my code so that we only use the Embedder to embed and unmount new embeds rather than a combination of the anchor element and embeds.
What I would suggest is for your dev team to add a `load` or `init` method to the Embedder so that new iframes can be injected in place of new anchor tags that have been added to the DOM. This follows the pattern that the Twitter team has done with their global's load method. This makes the library much more approachable for developers working with SPAs that so not load all content on initial render.
About Dropbox API Support & Feedback
Find help with the Dropbox API from other developers.
