注释:在移动端想做一个复制当前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)分享的更多相关文章

  1. 百度APP移动端网络深度优化实践分享(二):网络连接优化篇

    本文由百度技术团队“蔡锐”原创发表于“百度App技术”公众号,原题为<百度App网络深度优化系列<二>连接优化>,感谢原作者的无私分享. 一.前言 在<百度APP移动端网 ...

  2. 百度APP移动端网络深度优化实践分享(一):DNS优化篇

    本文由百度技术团队“蔡锐”原创发表于“百度App技术”公众号,原题为<百度App网络深度优化系列<一>DNS优化>,感谢原作者的无私分享. 一.前言 网络优化是客户端几大技术方 ...

  3. 百度APP移动端网络深度优化实践分享(三):移动端弱网优化篇

    本文由百度技术团队“蔡锐”原创发表于“百度App技术”公众号,原题为<百度App网络深度优化系列<三>弱网优化>,感谢原作者的无私分享. 一.前言 网络优化解决的核心问题有三个 ...

  4. Javascript 获取链接(url)参数的方法

    有时我们需要在客户端获取链接参数,一个常见的方法是将链接当做字符串,按照链接的格式分解,然后获取对应的参数值.本文给出的就是这个流程的具体实现方法. 当然,我们也可以用正则直接匹配,文章中也给出了一个 ...

  5. MySql 链接url 参数详解

    最近 整理了一下网上关于MySql 链接url 参数的设置,有不正确的地方希望大家多多指教: mysql JDBC URL格式如下: jdbc:mysql://[host:port],[host:po ...

  6. wordpress 获取分类ID,分类标题,分类描述,分类链接url函数

    get_cat_ID()    根据分类名称获取分类ID   ///// get_cat_name()    根据分类ID获取分类名称 用法:<?phpget_cat_ID( $cat_name ...

  7. jquery preventDefault() 方法防止打开不是本站的链接URL

    将以下代码保存为test.html,用浏览器打开即可测试 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&q ...

  8. PC端实现浏览器点击分享到QQ好友,空间,微信,微博等

    网上现在比较流行的是JIaThis,但是测试的时候,不能分享给QQ好友,一直卡在输入验证码,以下代码亲测有效,可直接使用 <%@ page language="java" c ...

  9. 腾讯短链接url生成接口/腾讯短网址在线生成/新浪微博短链接生成器的分享

    在通常情况下,URL是由系统生成的,通常包括URI路径,多个查询参数,可以对参数进行加密和解密. 当人们要分享某个URL,比如短信,邮件,社交媒体,这就需要短URL.而短网址,顾名思义就是在长度上比较 ...

随机推荐

  1. PropertyUtilsBean 将bean转成map

    public static Map<String,String> beanToMap(Object bean) { Map<String,String> params =Map ...

  2. ubuntu编译安装swoole (存多版本php时)

    一  切换php版本 见 https://www.cnblogs.com/bushuwei/p/11699503.html 二  编译安装swoole 这里对pecl安装不做介绍,以下是编译安装,复制 ...

  3. 初探 -5 JavaScript 语法

    JavaScript 是一个程序语言.语法规则定义了语言结构. JavaScript 语法 JavaScript 是一个脚本语言. 它是一个轻量级,但功能强大的编程语言. JavaScript 字面量 ...

  4. 问题:Thymeleaf整合Spring Security后sec属性不起作用

    可能原因: 版本不兼容,例如2.1.x的SpringBoot不兼容3.0.4的thymeleaf-extras-springsecurity4 解决方案: 修改Spring Boot的版本为2.0.x ...

  5. puppet工简介一

    puppet简介一 puppet工作原理 puppet 是一个配置管理工具, 典型的, puppet 是一个 C/S 结构, 当然,这里的 C 可以有很多,因 此,也可以说是一个星型结构. 所有的 p ...

  6. java高并发核心要点|系列4|CPU内存指令重排序(Memory Reordering)

    今天,我们来学习另一个重要的概念. CPU内存指令重排序(Memory Reordering) 什么叫重排序? 重排序的背景 我们知道现代CPU的主频越来越高,与cache的交互次数也越来越多.当CP ...

  7. python基础练习题08

    写一个登录程序,让用户输入账号和密码,输入用户和密码输入正确的话,提示你 xxx,欢迎登录,今天的日期是xxx,程序结束.错误的话,提示账号/密码输入错误, 最多输入3次,如果输入3次都没有登录成功, ...

  8. Linux安装redis,启动配置不生效(指定启动加载配置文件)

    一.今天有个同学问我,为什么明明安装了redis,修改了配置,启动的时候,配置还是不生效.如下图是安装后的redis文件图. 二.想加载上图中的redis.conf,进入到src中寻找到启动文件red ...

  9. 数据库管理哪家强?Devart VS Navicat 360°全方位对比解析

    今天小编向大家推荐的是两个开发环节的主流数据库管理品牌,那么你知道这两款数据库管理软件品牌与数据库引擎配套的管理软件有什么区别吗?小编这就360°全方位为您解答: ★ 品牌介绍 Devart:拥有超过 ...

  10. redis开发使用规范

    redis开发使用规范 1.冷热数据分离,不要将所有数据全部都放在Redis中 根据业务只将高频热数据存储到Redis中[QPS大于5000],对于低频冷数据可以使用mysql等基于磁盘的存储方式. ...