window.open() Preventing the rest of the function running

Question

PROBLEM I have a function which first sends users to a new page and then renders information on it. The Issue is that using "window.Open()" reloads the page and prevents the rest of the function from running

Intended Behaviour "window.open()" will open up the page but will not refresh it once it gets opened up.

CODE:

const ControlNavigationLinks = async function () {
  try {
    //  1) Redirect users to the pain page
    window.open("main.html", "_self"); //RELOADS THE PAGE, prevents function from continuing

    // 2)  Prevent The Search bar from reloading the page
    event.preventDefault();

    // 3) If Clicked on Logo, do nothing
    const element = event.target;
    if (element.classList.contains("logo")) return;

    // 4) Collect information about what country has been searched

    const form = document.querySelector(".search-bar-section");

    const search = form.elements["search"].value;
    if (search === null || "") return;

    model.state.search = await search;

    // 5) Clear DOM
    document.querySelector(".container-search").innerHTML = "";

    // 6) Get Information from External API about Countries
    const _ = await model.setSearchResults();

    // 7) Trigger Loading the page by calling seperate function
    ControlRenderSearchResults();
  } catch (e) {
    console.error(e.message);
  }
};

If I remove "window.open()" the function performs as intended (renders information) but I need it to switch to another page and render information their.

What Ive tried

    //  1) Redirect users to the pain page
    window.open("main.html", "_self"); //RELOADS THE PAGE, prevents function from continuing

    window.preventDefault(); //Prevents window.open() from working

Answer 1

Try removing the "_self", from the window.open method.

Answer 2

That's just your idea of how browser's JavaScript should work.

But in reality, unless it's a sub frame, your script is only allowed to operate on the page which loaded said script.

If you need that script on another page, move it to that other page.

Answer 3

Well simply move all your JS code (except window.open()) to the html file that will be opened in the new window. Like that, once the new window is opened, the html file, which contains your JS code, will be rendered there.

Code to adapt:

window.open("main.html", "_self");

<script>
  const ControlNavigationLinks = async function () {
    try {
      //  1) Redirect users to the pain page


      // 2)  Prevent The Search bar from reloading the page
      event.preventDefault();

      // 3) If Clicked on Logo, do nothing
      const element = event.target;
      if (element.classList.contains("logo")) return;

      // 4) Collect information about what country has been searched

      const form = document.querySelector(".search-bar-section");

      const search = form.elements["search"].value;
      if (search === null || "") return;

      model.state.search = await search;

      // 5) Clear DOM
      document.querySelector(".container-search").innerHTML = "";

      // 6) Get Information from External API about Countries
      const _ = await model.setSearchResults();

      // 7) Trigger Loading the page by calling seperate function
      ControlRenderSearchResults();
    } catch (e) {
      console.error(e.message);
    }
  };
  
  
  ControlNavigationLinks();
</script>

(PS: The <script> tag is in main.html don't forget this)