时间戳

首页 > 解决方案 > 在 iframe 加载之前设置 URL

javascript - 在 iframe 加载之前设置 URL

问题描述

我试图在我们公司的网站上加入一个侧边栏。问题是这是事后的想法，我想更改尽可能少的代码（我已经创建了整个布局和后端逻辑）。我想我可以创建一个新的 html 文档并使用指向“原始站点”的 iframe。

我还希望不重新加载文档的侧边栏部分。因此，在每个端点中都会检查 url 是否包含参数“sidebar”，如果不是这种情况，JS vil 将 iframe 的 src 更改为添加了“sidebar”参数的相同 url。这按预期工作，唯一的问题是当发生这种情况时，iframe 会闪烁一次，因为它会在执行 javascript 之前首先加载整个页面（目前在 iframe 上设置为“加载”事件侦听器）。我试图寻找一个在实际负载之前触发但似乎找不到任何东西的事件监听器。有没有我不必重写很多代码的解决方案？

JS：

iframe.addEventListener('load', ()=>{
        let newUrl = String(iframe.contentWindow.location.href)
        if(!newUrl.includes("sidebar=True")){
            if(newUrl.includes("?")){
                newUrl += "&sidebar=True"
            }else {
                newUrl += "?sidebar=True"
            }
            iframe.src = newUrl
        }
    })

烧瓶：

def test_render(site, **args):
    print(request.args.get("sidebar"))
    if(request.args.get("sidebar")):
        return render_template(site, **args)
    else:
        return render_template("test.html", page=request.path)

“测试渲染”功能只是为了测试这个想法。Test.html 是包含侧边栏逻辑的 html 文件。

标签： javascript

解决方案

  1. href 是一个字符串 - 使用 URL api 更整洁

    let url = new URL(iframe.contentWindow.location.href);
let sb = url.searchParams.get("sidebar");
if (!sb) { 
  url.searchParams.set("sidebar","True")
  iframe.location.replace(url.toString())
}

  2. 不重新加载，而只是添加一些CSS不是更快吗？

    if (top!==parent) document.write(`<style>#sidebar { display: none }</style>`)

  3. 您可以添加过渡

推荐阅读