移动端复制当前页面链接(URL)分享
注释:在移动端想做一个复制当前URL类似于分享的功能
示例:
<span class="share_btn"><img src="../resource/images/share/13.png"></span>
<!-- 分享 -->
<div class="share_mask"></div>
<div class="share_box">
<div class="share_list">
<ul>
<li style="display: none;">
<img src="../resource/images/share/share_wx.png">
<p>微信好友</p>
</li>
<li style="display: none;">
<img src="../resource/images/share/share_wxq.png">
<p>微信朋友圈</p>
</li>
<li class="copy_link">
<img src="../resource/images/share/copy_link.png">
<p>复制链接</p>
</li>
</ul>
</div>
<div class="cancel_share">取消</div>
</div>
<script>
/// 分享 lwd
$(".rtn_image").click(function () {
if ($(".rtn_list").css("display") == "none") {
$(".rtn_list").show();
} else {
$(".rtn_list").hide();
}
}); // 分享 lwd
$(".share_btn").click(function(){
$(".share_mask").fadeIn();
$(".share_box").fadeIn();
});
// 取消分享
$(".cancel_share").click(function(){
$(".share_mask").fadeOut();
$(".share_box").fadeOut();
});
$(".share_mask").click(function(){
$(".share_mask").fadeOut();
$(".share_box").fadeOut();
});
$(".copy_link").click(function(){
var url = window.location.href + "#share";
var successful;
if (navigator.userAgent.match(/(iPhone|iPod|iPad|iOS)/i)) { //ios
var copyDOM = document.createElement('div'); //要复制文字的节点
copyDOM.innerHTML = url;
document.body.appendChild(copyDOM);
var range = document.createRange();
// 选中需要复制的节点
range.selectNode(copyDOM);
// 执行选中元素
window.getSelection().addRange(range);
// 执行 copy 操作
successful = document.execCommand('copy');
// 移除选中的元素
window.getSelection().removeAllRanges();
$(copyDOM).hide()
}else{
var oInput = document.createElement('input')
oInput.value = url;
document.body.appendChild(oInput)
oInput.select() // 选择对象
successful = document.execCommand('Copy') // 执行浏览器复制命令
oInput.className = 'oInput'
oInput.style.display = 'none'
oInput.remove()
}
if(successful){
// layer.msg("复制成功")
layer.msg("复制成功",{time:2000},function(){
$(".share_mask").fadeOut();
$(".share_box").fadeOut();
});
}else{
layer.msg("复制失败",{time:2000},function(){
$(".share_mask").fadeOut();
$(".share_box").fadeOut();
});
}
});
</script>
<style>
.share_btn {
/* display: block; */
overflow: hidden;
position: absolute;
top: .1rem;
line-height: 0.7rem;
right: .2rem;
width: 0.36rem;
color: #333;
font-size: .28rem;
}
.share_btn>img{
width: 100%;
}
/* 分享 */
.share_mask{
position: fixed;
width: 100%;
height:100%;
background: rgba(0,0,0,0.5);
left:0;
top:0;
z-index:110;
display: none;
}
.share_box{
position: fixed;
bottom: 0;
width: 100%;
height:2.7rem;
left: 0;
background-color: #f8f8f8;
z-index:111;
display: none;
}
.share_box .share_list{
height:1.9rem;
}
.share_box .share_list ul{
display: flex;
justify-content: space-around;
}
.share_box .share_list ul li{
padding-top:0.22rem;
width: 33%;
}
.share_box .share_list ul li img{
width: 1rem;
height:1rem;
display: block;
margin:0 auto;
}
.share_box .share_list ul li p{
font-size:0.22rem;
color: #333;
line-height: 0.56rem;
text-align: center;
}
.cancel_share{
height:0.8rem;
line-height: 0.8rem;
font-size:0.28rem;
text-align: center;
color: #333;
background-color: #fff;
}
.layui-layer-dialog .layui-layer-content {
position: relative;
padding: 20px;
line-height: 24px;
word-break: break-all;
overflow: hidden;
font-size: 14px;
overflow-x: hidden;
overflow-y: auto;
color: #ffffff;
}
</style>
移动端复制当前页面链接(URL)分享的更多相关文章
- 百度APP移动端网络深度优化实践分享(二):网络连接优化篇
本文由百度技术团队“蔡锐”原创发表于“百度App技术”公众号,原题为<百度App网络深度优化系列<二>连接优化>,感谢原作者的无私分享. 一.前言 在<百度APP移动端网 ...
- 百度APP移动端网络深度优化实践分享(一):DNS优化篇
本文由百度技术团队“蔡锐”原创发表于“百度App技术”公众号,原题为<百度App网络深度优化系列<一>DNS优化>,感谢原作者的无私分享. 一.前言 网络优化是客户端几大技术方 ...
- 百度APP移动端网络深度优化实践分享(三):移动端弱网优化篇
本文由百度技术团队“蔡锐”原创发表于“百度App技术”公众号,原题为<百度App网络深度优化系列<三>弱网优化>,感谢原作者的无私分享. 一.前言 网络优化解决的核心问题有三个 ...
- Javascript 获取链接(url)参数的方法
有时我们需要在客户端获取链接参数,一个常见的方法是将链接当做字符串,按照链接的格式分解,然后获取对应的参数值.本文给出的就是这个流程的具体实现方法. 当然,我们也可以用正则直接匹配,文章中也给出了一个 ...
- MySql 链接url 参数详解
最近 整理了一下网上关于MySql 链接url 参数的设置,有不正确的地方希望大家多多指教: mysql JDBC URL格式如下: jdbc:mysql://[host:port],[host:po ...
- wordpress 获取分类ID,分类标题,分类描述,分类链接url函数
get_cat_ID() 根据分类名称获取分类ID ///// get_cat_name() 根据分类ID获取分类名称 用法:<?phpget_cat_ID( $cat_name ...
- jquery preventDefault() 方法防止打开不是本站的链接URL
将以下代码保存为test.html,用浏览器打开即可测试 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&q ...
- PC端实现浏览器点击分享到QQ好友,空间,微信,微博等
网上现在比较流行的是JIaThis,但是测试的时候,不能分享给QQ好友,一直卡在输入验证码,以下代码亲测有效,可直接使用 <%@ page language="java" c ...
- 腾讯短链接url生成接口/腾讯短网址在线生成/新浪微博短链接生成器的分享
在通常情况下,URL是由系统生成的,通常包括URI路径,多个查询参数,可以对参数进行加密和解密. 当人们要分享某个URL,比如短信,邮件,社交媒体,这就需要短URL.而短网址,顾名思义就是在长度上比较 ...
随机推荐
- mysql5.6
5.6 与之后版本有差别本文以5.6为例** 1.mysql5.6安装 本文采用2进制安装 mkdir /server/tools -p cd /server/tools 1.下载 wget http ...
- PHP生成excle文件
excle_word.php /*** * 生成excle文件 ***/ $time = time(); $filename = date("Y年m月d日h点m分s秒", $tim ...
- google浏览器切换成中文
新浪下载地址:http://down.tech.sina.com.cn/content/40975.html 默认字体好像是西班牙语 1.浏览器地址chrome://settings/language ...
- Jquery复习(一)之animate()易忘点
可以用 animate() 方法来操作所有 CSS 属性吗? 是的,几乎可以!不过,需要记住一件重要的事情:当使用 animate() 时,必须使用 Camel 标记法书写所有的属性名,比如,必须使用 ...
- [转载]关于机器上已安装CUDA,但在anaconda下tensorflow出现cudaGetDevice() failed问题的解决
机器已经安装了CUDA 9.1,驱动为390.58,我补装了对应的cudnn,并且测试通过,但是在anaconda环境下,用conda install tensorflow-gpu=1.12后,运行s ...
- css3之新增伪类
css3新增了许多伪类,但是IE8以及更低版本的IE浏览器不支持css3伪类,所以在使用时要是涉及到布局等意象全局的样式,应该多考虑一下. 1.elem:nth-child(n) 这个伪类选中父元素下 ...
- JS 的 Element元素对象
在 HTML DOM 中, 元素对象代表着一个 HTML 元素. 元素对象 的 子节点可以是, 可以是元素节点,文本节点,注释节点. NodeList 对象 代表了节点列表,类似于 HTML元素的子节 ...
- 教你搭建基于typescript的vue项目
自尤大去年9月推出vue对typescript的支持后,一直想开箱尝试,对于前端sr来说,vue的顺滑加上ts的面向对象,想着就非常美好~ 终于在两个月前,找到了个机会尝试了一把vue+ts的组合. ...
- Linux操作系统笔记
#include <stdio.h> #include <stdlib.h> #include <unistd.h> //linux下面的头文件 #include ...
- BufferedReader和PrintWriter读写中文的问题
最近用BufferedReader读一个文本文件,然后再将读出的内容用PrintWriter写入到另外一个新的文件中. 之前一直没有发现这个问题,就是如果文本内容中有中文,在读出的内容和写入的内容都会 ...