Render script in DOM where script is placed in code. #76946
Unanswered
MartinDavi
asked this question in
Help
Replies: 2 comments 1 reply
-
|
Bump |
Beta Was this translation helpful? Give feedback.
0 replies
-
|
Have you tried loading script in useEffect, creating element with js? Something like this const scriptContainerRef = useRef(null);
useEffect(() => {
if (scriptContainerRef.current) {
const script = document.createElement('script');
script.src = "script.js";
script.async = true;
scriptContainerRef.current.appendChild(script);
return () => {
if (scriptContainerRef.current) {
scriptContainerRef.current.removeChild(script);
}
};
}
}, []);
return (
<div ref={scriptContainerRef}>
<h2>Content below script</h2>
</div>
);
} |
Beta Was this translation helpful? Give feedback.
1 reply
-
|
Yep, this can sometimes work. We've run into cases though where the third party script has some garbage in it like Ideally there'd be a |
Beta Was this translation helpful? Give feedback.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Uh oh!
There was an error while loading. Please reload this page.
-
Summary
I need to add a third party embed script to a page, and it's important that it renders in the DOM where it's placed in the code. The script needs to render an iFrame as a sibling to where the script is placed.
Next.js wants to pull it either into the head, or the end of the body of the tag depending on the strategy, thus the iFrame either doesn't render because it's been placed in the
<head>, or it renders at the very end of the<body>tag.I need it to stay in place where I put it. Is there any way to do this?
Additional information
No response
Example
No response
Beta Was this translation helpful? Give feedback.
All reactions