Skip to content

Request: Option to work in head tag or body #22

@jafin

Description

@jafin

Running script from head tag vs body

For apps that load the react-abode script in the head instead of bottom of body, would it be possible to amend to check for DOMContentLoaded event?

Something like the below perhaps:

export const populate = async (options?: PopulateOptions) => {
  if (/complete|interactive|loaded/.test(document.readyState)) {
    addNewComponentHandler(options);
  }
  else {
    document.addEventListener('DOMContentLoaded', ()=> addNewComponentHandler(options), false);
  }
};

const addNewComponentHandler = async (options?: PopulateOptions) => {
  await checkForAndHandleNewComponents(options);

  document.body.addEventListener('DOMNodeInserted', () =>
    checkForAndHandleNewComponents(options))
};

If I attempt to configure the script in head now, I receive the error:

Uncaught (in promise) TypeError: Cannot read properties of null (reading 'addEventListener')

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions