javascript window.open()阻止函数的其余部分运行

c90pui9n  于 2023-03-06  发布在  Java
关注(0)|答案(3)|浏览(154)
    • 问题**我有一个函数,它首先将用户发送到一个新页面,然后在该页面上呈现信息。问题是使用"window.Open()"会重新加载页面,并阻止函数的其余部分运行
    • 预期行为**"www.example.com()"将打开页面,但在打开后不会刷新。window.open()" will open up the page but will not refresh it once it gets opened up.
    • 代码:**
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);
  }
};

如果我删除"www.example.com()",函数将按预期执行(呈现信息),但我需要它切换到另一个页面并呈现信息。window.open()" the function performs as intended (renders information) but I need it to switch to another page and render information their.
"我所尝试的"

//  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
b4qexyjb

b4qexyjb1#

尝试从www.example.com方法中删除“_self”window.open。

sulc1iza

sulc1iza2#

这只是您对浏览器的JavaScript应该如何工作的想法。
但在现实中,除非它是一个子框架,您的脚本只允许在加载该脚本的页面上操作。
如果您需要在另一页上使用该脚本,请将其移动到该页。

nx7onnlm

nx7onnlm3#

我们只需要将所有的JS代码(除了window.open())移到新窗口中打开的html文件中,这样,一旦新窗口打开,包含JS代码的html文件就会呈现在那里。

要调整的代码:

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:<script>标记位于main. html中,请不要忘记这一点)

相关问题