npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

window-open-pro

v0.0.5

Published

处理window.open被浏览器拦截问题

Downloads

9

Readme

背景

浏览器安全策略会限制非用户发起的新 tab 打开,会被浏览器拦截;因此需要针对这种场景做出优化,提升用户体验; 降低页面跳转失败对用户的影响;

方案描述

目前使用方案一进行实现

方案一:

  1. window.open 方法的封装, 传入一个异步方法,获取异步方法返回的结果,作为新页面 url 的参数,如何处理看用户
  2. 异步方法执行之前打开一个 loading 页面 a. 若接口成功返回,拿到 url 参数,更新 loading 的 window 对象的 location.href b. 若接口执行失败,先给予 loading 页面提示,设置延时,【然后关闭 loading 页面,或者 location.href 设置成原来的 url】

效果图

方案二:

  1. 通过判断 window.open 执行结果,成功正常跳转;失败给予页面友好提示;可以增加一个 callback 用户自行处理失败后的动作

使用方式

npm i window-open-pro
yarn add i window-open-pro
详情API以及DMEO可以参考 项目中demo