js实现在页面打开链接时自动给url加上#记录值参数
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了js实现在页面打开链接时自动给url加上#记录值参数相关的知识,希望对你有一定的参考价值。
如我的网站里以一个可以点击的a链接,如<a href="https://www.baidu.com/">百度</a>,点击这个链接时,打开的页面的网址为https://www.baidu.com/,我想在url地址后面加一个记录值#baidu,变成打开时url为https://www.baidu.com/#baidu,求相关的代码,谢谢!
因为我不太懂代码,所以希望大神们给的代码能尽量完整一点,万分感谢!
原生javascript代码,:
window.onload= function()
document.getElementById('myForm').submit();
jQuery代码:
$(function()
$('#myForm').submit();
);
js实现避免浏览器拦截弹出新页面的方法
“想通过javascript在浏览器新标签页或新窗口打开一个新的页面,结果被浏览器大大无情给拦截了”
业务需求:前端提交数据到后端,后端返回url,然后在新窗口打开该url。
(前后端数据请求使用异步请求的方式)
自己常用的两种打开新窗口的方式
window.open()
用a标签的target="_blank"
在模板中插入一个a标签,然后javascript去触发a链接的click,实现跳转。(该方法在jQuery跟js中有坑...)
//jQuery
<a href="http://wuliv.com" id="openNew"></a>
$(function(){
$(\'#openNew\').click()
})
//失败无效
//***jQuery***
<a href="http://wuliv.com" id="openNew">
<span><span>
</a>
$(function(){
$(\'#openNew span\').click()
})
//成功打开新页面
//***javascript***
<a href="http://wuliv.com" id="openNew"></a>
document.getElementById(\'openNew\').click()
//成功打开新页面
使用jquery来触发a标签点击跳转时,需在a标签插入一个子标签,然后触发子标签的点击实现a标签的跳转(有点绕)
$("#openNew")得到的是一个jquery的对象,jquery本身对该对象的一些属性进行了封装,所以会导致click失效;而使用js对象 document.getElementById("a") 则不会存在该问题
onclick()也可以触发事件,但是onclick跟click不同;
onclick触发的是方法,而click先触发按钮的点击事件,再触发方法。
如果该对象没有绑定onclick方法则无法被触发,而click没有绑定方法也可以触发。
弹出新窗口失败的原因:
使用window.open(),但是定义了窗口名,也就是在打开窗口传入name参数,因为window.open只能打开唯一的窗口名为name的窗口页面,如果同名,则无法打开。
解决方案:window.open()不定义窗口名
使用了异步请求,通过ajax向服务器请求数据,在请求完成后再打开新窗口。因为异步请求存在延时,浏览器会认为不是用户触发的操作。
解决方案:
2.1 ajax请求设置成同步的方式
如果使用了jQuery中的ajax方法做异步请求,则可以配置 async: false, 使请求方式变为同步。
2.2 vue2.0采用的axios进行数据请求,axios没有同步请求的设置,都是异步的。
在axios请求之前先打开一个空白的新窗口
var newPage = window.open() 打开的空白页上有标题,显示的是“无标题”
window.open(\'about:blank\') 标题上显示的是\'about:blank\'
接着在axios的then回调里写入要打开的url
window.open(\'about:blank\')
至此解决了浏览器阻止新窗口弹窗问题。
一个小问题,有这么多道道,外面世界太浮躁,还是安心写代码来的舒畅些。
以上是关于js实现在页面打开链接时自动给url加上#记录值参数的主要内容,如果未能解决你的问题,请参考以下文章
有哪些api接口可以实现微信自动唤醒外部浏览器打开指定页面?