设置location.hash的值，前面不要带#号，为了兼容Safari

最新推荐文章于 2023-09-06 09:43:33 发布
原创 最新推荐文章于 2023-09-06 09:43:33 发布 · 6.9k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#safari #浏览器 #url

本文介绍了一种在Safari浏览器中正确设置URL hash值的方法。通过避免在location.hash属性赋值时带上'#'符号，可以确保在不同浏览器间的一致性。
width="760" scrolling="no" height="90" frameborder="0" src="http://p.alimama.com/code.php?t=2&i=mm_10003521_106784_109301&w=760&h=90&sz=11&bgc=FFFACD&bdc=FFFFFF&tc=000080&lc=000000&dc=000000" name="alimamaifrm" id="alimamaifrm" border="0" marginwidth="0" marginheight="0">
在网页http://xxx.com//a.html#abc中
alert(location.hash)得到的结果是  #abc
如果想改变hash值，理所当然应该是location.hash = "#xyz"；
但是这句话在safari浏览器上出了差错：
在safari下网页的url会变成http://xxx.com//a.html#%23xyz
而%23即是转码之后的#

所以设置hash值时前面不要带#号
location.hash = "xyz"；
这样在各种浏览器中都会得到想要的结果

safari的雷真多，都老子有钱了，买个2手mac，好好修理修理它
 
window.navigate 与 [removed].href 的使用区别介绍
09-05
通过设置`window.location.href` 的值，你可以实现页面的跳转。例如： ```javascript window.location.href = "http://jb51.net/"; ``` 或者，你也可以在HTML元素的事件处理程序中使用`window.location.href`，像...
js操作iframe兼容各种主流浏览器示例代码
10-27
对于那些不支持`postMessage`的旧版浏览器（如IE8），可能需要使用其他方法，如设置`window.name`或者利用`window.location.hash`进行通信，但这会更复杂，且存在一些安全风险。 总之，处理`iframe`的跨窗口通信时...
hash #怎么去掉
weixin_42727360的博客
05-09 2435
1、路由mode改为"history"; const router = new VueRouter({ mode: ‘history’, routes // （缩写）相当于 routes: routes }) 2、在项目配置文件中，这个是在 sever{}中如下面两种方式修改，这两种方法都行； location / { try_files $uri $uri/ @router; index index.html; } location @router { re
uniapp 路由不要显示#
weixin_44195615的博客
09-06 6118
另外，切换到history模式后，你需要确保在打包或部署应用时，服务器能正确地处理路由请求，以避免404错误。具体的配置方式取决于你使用的服务器和后端框架。请注意，使用history模式需要后端服务器的支持。你需要在服务器上进行相应的配置，以确保在刷新页面或直接访问路由时能正确地返回对应的页面。方法来管理路由，而不再使用hash模式。在Uniapp中，路由默认使用的是hash模式，即在URL中添加。切换到history模式后，Uniapp将使用HTML5的。，可以切换为使用history模式。
vue hash模式转为history模式 网站路径去掉#号
黄哈哈的博客
07-25 460
vue中hash模式转history模式，vue.config.js
location.hash详解
哒哒哒
06-12 1万+
了解vue-router原理中更新URL但不重载页面原理之一location.hash1.存在形式及意义一般情况下为URL后 "#" 及其后面一部分组成，如http://www.test.com/#/something，其中http://www.test.com为真实的路径，而#/something则为网页中的位置，称之为锚点在访问锚点时会自动跳刀锚点所在的网页位置，通常有两种方式作为锚点<...
前端路由改变location.hash时清除history
_
02-26 3405
通过使用以下方法来给window.location.hash 赋值时 window.location.hash = 'a' 会在 window.history 新增一条历史记录，如果想清除掉这条记录，可以使用 let currentHash = window.location.hash; let newHref = window.location.href.toString().replace(currentHash, '')+"#"+"b"; window.location.replace.
下面这段代码在代码检视时出现了报错： const sharedClick = async (event) => { preventPropagation(event, fromPage); // 调用阻止冒泡的函数 event.preventDefault(); // 阻止冒泡以防止a标签中超链接跳转 setShares(shares + 1); // 分享总数+1 shareTrack && shareTrack(); let url = getUrl(); h5CommonFunctionTrack({ data: { function: '13', pageType: '详情页', columnType, loginUser } }); let title = parseTopic(detailData.title, true) || dictWX[columnType] || dictWX.pageName; if (window.location.href.includes('/datasets')) title = parseTopic(datasetsDict.shareTitle, true); let text = title + ' ' + url; if ( browser === 'Safari' && (window.location.href.includes('2024AnnualWrap-up') || window.location.href.includes('2025AnnualWrap-up')) ) text = text + ' ' + dictWX.pageName; if (!(window.App && window.App.openShare) && !isApp) { // IOS:IOS系统分享 启用IOS系统所带的分享功能 if ([isIos, navigator.share].every(Boolean)) { // 当浏览器支持此功能// 要共享的 URL// 要共享的文本text:推荐理由 or 摘要 or 正文 // 要共享的标题title share({ title, url, text }); } else { copy(title + ' ' + url); Toast.show({ content: dict.copyToClipboard }); } return; } // 兼容（IOS）welink分享不能有换行 let summary = getPlainText(detailData.content) ?.replace(/"/g, '＂') ?.replace(/\\/g, '＼') .replace(/\t|\n|\v|\r|\f/g, '') .substring(0, 100) || ''; // 转义话题 summary = parseTopic(summary, true); if (isApp) { const webUrl = isHarmonyos ? window.location.href : url; let argumentsP = { ...{ title: parseTopic(detailData.title?.replace(/"/g, '＂') || '', true), webUrl, summary }, ...{ imgUrl: shareCover || defaultImg, contentId }, }; if (window.location.hash.includes('/datasets')) { argumentsP = { ...{ title: parseTopic(datasetsDict.shareTitle?.replace(/"/g, '＂') || '', true), webUrl, summary: parseTopic(datasetsDict.shareDesc, true), }, ...{ imgUrl: datasetsDict.shareImgUrl || defaultImg, contentId }, }; } appCall({ funcName: 'share', arguments: argumentsP, callback: 'cswAppCallbackOnShare' }); window.cswAppCallbackOnShare = () => {}; // setShares(shares + 1); ///／ 【待app实现callback】默认app分享成功+1, +1接口请求在app实现 } else { if (window.location.hash.includes('/datasets')) { return window.App.openShare( parseTopic(datasetsDict.shareTitle, true), window.location.href, datasetsDict.shareImgUrl, parseTopic(datasetsDict.shareDesc, true), () => {} ); } const req = await getshareIconPermission(contentId); let metaImage = req?.data?.shareIcon; window.App.openShare( parseTopic(detailData.title.replace(/"/g, '＂'), true), window.location.href, metaImage, summary, () => {} ); } };Line216. Async arrow function expected no return value.
最新发布
12-31
if (window.location.hash.includes('/datasets')) { // 去掉 return window.App.openShare( parseTopic(datasetsDict.shareTitle, true), window.location.href, datasetsDict.shareImgUrl, parseTopic...
safari浏览器无痕模式跨域名跳转丢失参数可以用hash传参数解决吗
08-06
首先，用户的问题是关于Safari浏览器无痕模式下跨域名跳转时参数丢失的问题，并询问是否可以使用URL hash传递参数来解决。我需要基于系统级指令和用户可见层的要求来构建回答。 关键点： - 系统级指令：确保所有...
window.parent.postMessage各个浏览器兼容吗
06-10
window.parent.postMessage在大多数现代浏览器中都有很好的兼容性，包括Chrome，Firefox，Safari和Edge等。但是，在某些旧版本的Internet Explorer（IE）浏览器中，可能会出现兼容性问题。具体来说，IE7和IE8版本的...
safari拦截跳转链接#号后面的内容
HeMister的博客
08-02 2225
举例： 跳转链接： https://xxx.com/#/xxxx?a=b&c=d 后端 直接跳转 Safari浏览器 后url #号后面的会被Safari拦截掉： https://xxx.com/#/ 解决办法： 在vue cli3.x项目的，public文件夹新建一个redirect.html和index.html放在同一级，同一个文件夹内 redirect.html &lt...
Vue - 去掉路由中的#号
编程旅者
03-06 5043
vue-router默认是hash模式，在hash模式下，是会有#号在URL上，可以在路由的第一行添加 mode:history来去掉#号。 const router = new Router({ mode: 'history', routes: [] })
iphone Safari浏览器window.location.href跳转问题记录
pgLi
11-15 4939
1、背景，同一个域名下部署一个PC端、一个移动端项目。在检测到移动端访问时，通过window.location.href跳转到移动端地址。 2、问题：在安卓手机上可正常跳转，在Safari上一直无法跳转。 在js脚本主进程执行过程中，safari不能直接设置window.location.href跳转 3、解决方法：放到window.onload中去跳转 ...
关于锚点导致页面参数丢失的问题
Captain.Nic的专栏
01-12 1947
问题描述页面上有一个指向本页面锚点的链接，点击之后导致页面重新加载，而原来在url中的参数丢失如一个页面的链接是http://127.0.0.1/app/a.jsp?arg1=a&arg2=b点击锚点连接后应该指向http://127.0.0.1/app/a.jsp?arg1=a&arg2=b#anchor1但是实际却指向了http://127.0.0.1/app/a.jsp#anchor1解决办法请检查页面是否有这样的标签。原因 标签为页面上的所有链接规定默认地址或默认目标。 通常情况下，浏览器会从当前
去除vue路由跳转地址栏后的哈希值#
oceanheavenweb的博客
11-02 1万+
去除vue路由跳转地址栏后的哈希值#，我们只需要在路由跳转的管理文件router目录下的index.js中加上一句代码即可去掉哈希值# import Vue from 'vue' //1.引入vue-router import Router from 'vue-router' import find from '../components/find' import mall from
location.hash的用法及onhashchange (精华，建议大家没事读一下)
热门推荐
babybk的博客
05-08 6万+
location.hash是什么: 熟悉HTML都知道喵链接，没错，location.hash就是获取或设置喵链接的。上面的用法相信大家都知道，但是下面的就要考细节了。 当我们载入一个页面后，然后又去触发了一个AJAX请求去部分改变了页面上的内容，这个时候，你会发现，浏览 器其实并没有记录这两个动作，而是把这两个动作记录为了一个动作，即是认为你只打开一个页面，所以“前进/后退”按钮就没有用
javascript，改变location.hash时清除history
JohnLiu的博客
11-28 1万+
通过使用以下方法来给hash赋值时 window.location.hash = 'hash的值'  会在window.history新增一条历史记录，如果想清除掉这条记录（不清除的话点击返回会回到上一个hash值的页面），可以使用 window.location.replace(window.location.href.toString().replace(window.locatio...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值