how to append parsed code to the end of the body tag? #1015

yaman3bd · 2023-08-14T18:44:29Z

yaman3bd
Aug 14, 2023

in my app the user can write custom code and the code should be added before the end of the tag, I tried to use parse in this way:

Example of body_code:

<script type="text/javascript">
  console.log("Custom code before the end of the <body/> tag")
</script>

<style>

</style>

<!-- Copyright -->
<div class="footer-copyright text-center py-3">© 2023 Copyright:
    <a href="/"> MyApp.com</a>
</div>
<!-- Copyright -->

function App({ Component, pageProps: { session, ...rest } }: AppProps) {
  const { store, props } = storeWrapper.useWrappedStore(rest);
  const { emotionCache: clientSideEmotionCache, pageProps } = props;

  const { data: integrations } = useFetchIntegrationsQuery();
  return (
    <SessionProvider session={session}>
      <ReduxProvider store={store}>
        <Component {...pageProps} />
        {parse(integrations.body_code)}
      </ReduxProvider>
    </SessionProvider>
  );
}

export default appWithTranslation(App, i18nextConfig);

But the added code/elements are not added before the body close tag:

Is there any way solution that can help me do what I want?

remarkablemark · 2023-08-14T19:51:43Z

remarkablemark
Aug 14, 2023
Maintainer

it's working as expected since <div class="footer-copyright text-center py-3"> is rendered after the <script>. In your screenshot, the <div class="flex h-screen flex-col justify-between"> that comes before is probably injected by Next.js.

Also, this may be unrelated but script tags are not evaluated on the client-side.

1 reply

yaman3bd Aug 15, 2023
Author

thanks for letting me know about it, I was able to do what I want using replace and the scripts are working as expected but the <script> elements are added twice on the initial page load:
code snippet which I am trying to append:

<div id="my_div">
    some text in my div
    <input type="button" value="click" onclick="msg()"/>
</div>
<script type="text/javascript">
    const btn = document.getElementById("my_btn");
    if (btn) {
        btn.addEventListener("click", function () {
            document.getElementById("my_div").style.backgroundColor = "red";
        });
    }

    function msg() {
        alert("Hello Javatpoint");
    }

    console.log('hello')
</script>

this is how I am doing it:

function App({ Component, pageProps: { session, ...rest } }: AppProps) {
  const { store, props } = storeWrapper.useWrappedStore(rest);
  const { emotionCache: clientSideEmotionCache, pageProps } = props;

  const [headCode, setHeadCode] = useState<string>("");
  const [bodyCode, setBodyCode] = useState<string>("");

  const { data: integrations } = useFetchIntegrationsQuery();
  const { member } = useContext(AuthContext);

  useEffect(() => {
    if (integrations) {
      let code = integrations.custom_head_code ?? "";

      if (member) {
        code += integrations.custom_logged_in_code;
      } else {
        code += integrations.custom_logged_out_code;
      }
      setHeadCode(code);
      setBodyCode(integrations.custom_body_code ?? "");
    }
  }, [integrations, setHeadCode, setBodyCode]);

  return (
    <SessionProvider session={session}>
      <ReduxProvider store={store}>
        <Head>{parse(headCode)}</Head>
        <Component {...pageProps} />
        {parse(bodyCode, {
          replace: function (domNode) {
            if (domNode instanceof Element && domNode.type === "script") {
              let innerHTML = "";

              if (domNode.children) {
                domNode.children.map((child) => {
                  if (child.type === "text") {
                    innerHTML += child.data;
                  }
                });
              }

              const tempScript = document.createElement("script");

              Object.keys(domNode.attribs).forEach((att) => {
                tempScript.setAttribute(att, domNode.attribs[att]);
              });

              if (innerHTML) {
                tempScript.innerHTML = innerHTML;
              }
              
              document.body.appendChild(tempScript);

              return <></>;
            }
          }
        })}
      </ReduxProvider>
    </SessionProvider>
  );
}

export default appWithTranslation(App, i18nextConfig);

result:

also, I found this issue when I change the page the scripts are added again, I am using `nextjs`:

Also, I have an unrelated question, if you were working on a project and you have code snippets that you get from the API (saved in the DB), how would you handle appending the snippets into the app, what tools would you use?
is what I am doing right?
and am I using html-react-parser?

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

Uh oh!

how to append parsed code to the end of the body tag? #1015

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Replies: 1 comment 1 reply

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

Uh oh!

Uh oh!

how to append parsed code to the end of the body tag? #1015

Uh oh!

Uh oh!

yaman3bd Aug 14, 2023

Replies: 1 comment · 1 reply

Uh oh!

remarkablemark Aug 14, 2023 Maintainer

Uh oh!

yaman3bd Aug 15, 2023 Author

also, I found this issue when I change the page the scripts are added again, I am using nextjs:

yaman3bd
Aug 14, 2023

Replies: 1 comment 1 reply

remarkablemark
Aug 14, 2023
Maintainer

yaman3bd Aug 15, 2023
Author

also, I found this issue when I change the page the scripts are added again, I am using `nextjs`: