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

score 0 · Answer 1 · answered Mar 04 '23 at 05:36

0

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

answered Mar 04 '23 at 05:36

Tosha

1

Doesnt work, it will also open up a new page. – Ninad Bhide Mar 04 '23 at 05:52
Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Mar 09 '23 at 07:19

score 0 · Answer 2 · answered Mar 04 '23 at 07:48

0

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.

answered Mar 04 '23 at 07:48

Top-Master

7,611
5
39
71

score 0 · Answer 3 · answered Mar 04 '23 at 18:49

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)

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

3 Answers3

Code to adapt: