Pat-select2 does not work in an iframe

I created a browser view that is designed to be used in the src of an iframe embedded in a third-party (non-Plone) site. Inside this browser view, I use pat-select2. The problem is:

  • The <select class='pat-select2'...> is rendered as a naked select in the iframe, which means the pattern never even runs to transform it into the select2 widget.
  • If I load the view in a browser by itself (i.e. not embedded in an iframe), then everything works fine.
  • There are no errors in the browser console, in either case.

Obviously, in order to iframe-embed the view, the view template is very stripped down, without most of the Plone baggage.

In the <head> I'm loading:

<link href='${context/@@plone_portal_state/portal_url}/++plone++production/default.css' rel='stylesheet' type='text/css' data-bundle='production' />
<link href='++plone++static/plone-compiled.css' rel='stylesheet' type='text/css' data-bundle='plone' />
<script type='text/javascript' src='${context/@@plone_portal_state/portal_url}/++plone++production/default.js' data-bundle='production'></script>
<script type='text/javascript' src='++plone++static/plone-compiled.min.js' data-bundle='plone'></script>

... along with my own js and css.

Would anyone have any idea how to make this work?

Have you tried putting the links in the body?