We are aware of the issue with the badge emails resending to everyone, we apologise for the inconvenience - learn more here.
Forum Discussion
jakepeyser
3 years agoExplorer | Level 3
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...
- 3 years ago
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
3 years agoDropbox 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.
- jakepeyser3 years agoExplorer | Level 3
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-DB3 years agoDropbox Staff
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.
- jakepeyser3 years agoExplorer | Level 3
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.
5,876 PostsLatest Activity: 7 hours agoIf you need more help you can view your support options (expected response time for an email or ticket is 24 hours), or contact us on X or Facebook.
For more info on available support options for your Dropbox plan, see this article.
If you found the answer to your question in this Community thread, please 'like' the post to say thanks and to let us know it was useful!