Skip to content

Issue #3542551: fixes h5p iframe asset aggregation causing browser console error

Greg Watsonrequested to merge
issue/h5p-3542551:3542551-h5p-settings-not into 2.0.x

Summary

When loading an H5P rendered via the "H5PDefaultFormatter" field (as opposed to the embed link) and using the iframe rendering method (as opposed to the dive method), the browser console shows the following error: Uncaught TypeError: can't access property "H5PIntegration", settings.h5p is undefined.

Repro steps:

  • Create an H5P of the type that renders as an iframe (e.g., "Find the Words" or "Quiz (Question Set)").
  • View the node with the H5P you just made. Any method of viewing the rendered H5P field except for the embed link will suffice.
  • Look in the browsers console. You will see the error message listed above.

Problem

The aggregation of H5P libraries was incorrectly including the h5p/h5p.content library, which resulting in Drupal and H5P core libraries being passed to h5p.js via the H5P Integration array. Those unneeded libraries loading within the iframe context generated this error.

Solution

Excluding h5p/h5p.content during asset aggregation limited the passed-in libraries to just those needed by the H5P Interactive. Turning off aggregation of those libraries helps the data passed by more consistent with what the h5p.js iframe init behavior expects.

Changes

Closes #3542551

Tests

  • Ensure a variety of H5Ps rendered via node fields (not embeds) continue to work
  • No browser console errors appear when loading.
  • Be sure to include test of some H5Ps that use div's rather than iframes. At least as of this moment, the "Find Multiple Hotspots" interactive is one that uses divs.
  • This should work whether or sitewide JS/CSS aggregation is enabled and whether or not caching is turned on.
Edited by Greg Watson

Merge request reports