Child Item

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

Find more posts tagged with

API

Abuse

Accepted answers

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.

All comments

Greg-DB

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.

jakepeyser

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

jakepeyser

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.

Greg-DB

Thanks for the feedback! I'll pass this along as a feature request, but I can't promise if or when that might be implemented.