Scripts do not work when added dynamically added to iframe <head>
Question
I am using the latest version of grapesjs (0.15.8) and running it on Windows 10 x64 on Electron (this is not a issue with electron) and am facing a problem when I try to dynamically attach scripts to the editor iframe, I have included a link to CodePen for more on this issue. In my project I have to dynamically change scripts. Scripts only work when I add them through canvas: {scripts: ['...']} not when I $(editor.Canvas.getDocument().head).append("...");
Please suggest fix or workaround. (love the project btw)
Answers (3)
Hi there! see if this can help you out:
const scriptEl = document.createElement('script');
scriptEl.src = 'https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js';
editor.Canvas.getDocument().head.appendChild(scriptEl);
cheers!
Thank you very much, the fix worked, but why does it not work with jQuery?
Ok thanks a lot.
Related Questions and Answers
Continue research with similar issue discussions.
Issue #6654
the rich-text editor cannot be activated
GrapesJS version [x] I confirm to use the latest version of GrapesJS What browser are you using? chrome v91 Reproducible demo link https://...
Issue #6549
Couldnt Resize image
GrapesJS version [x] I confirm to use the latest version of GrapesJS What browser are you using? Chrome Reproducible demo link https://code...
Issue #6263
Duplicated links are added using rte
GrapesJS version[X] I confirm to use the latest version of GrapesJSWhat browser are you using? ChromeReproducible demo link https://codepen...
Issue #6271
Drag and drop of components doesn't work on latest Firefox
GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? Firefox 131.0 (64-bit) on Linux and Mac Re...
Paid Plugins That Match This Issue
Curated by issue keywords and label relevance to help you ship faster.
Loading paid plugin recommendations...
Check the open-source GrapesJS plugins on GitHub or run a quick search in our free catalog.
Browse free plugins →Premium plugins ship with support, regular updates, and production-ready features — save days of integration work.
Browse premium plugins →Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.