如何通过jQuery/JavaScript点击图标将HTML内容复制到弹窗？

直接修改你的代码，就能实现点击图标后把指定HTML内容复制到弹窗里：

修正后的完整代码 #

JavaScript

$(document).ready(function () {
    $("#OpenDialog").click(function (e) {
        // 阻止a标签默认跳转行为，避免页面跳到顶部
        e.preventDefault();
        // 打开弹窗窗口
        var popupWin = window.open("", "popupWindow", "width=600, height=400, scrollbars=yes");
        // 获取需要复制的目标HTML内容
        var targetHtml = $(".data_copy").html();
        // 将内容插入弹窗的body中
        $(popupWin.document.body).html(targetHtml);
    });
});

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="#">Click here to open dialog
    <svg id="OpenDialog" width="20px" height="20px" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M16 2H7.979C6.88 2 6 2.88 6 3.98V12c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 10H8V4h8v8zM4 10H2v6c0 1.1.9 2 2 2h6v-2H4v-6z"/></svg>
</a>    

<br> 
<div class="data_copy">
  <p>html data to copy</p>
  <p>test</p>
  <input type="text" />
  <button type="button">testing </button>
</div>

关键修改点 #

• 阻止默认跳转：给点击事件添加e.preventDefault()，避免点击a标签后页面跳到顶部
• 获取目标内容：用$(".data_copy").html()获取你要复制的HTML结构
• 写入弹窗：直接把获取到的HTML内容赋值给弹窗的body，弹窗就会显示和.data_copy完全一致的内容

额外需求：如果要把HTML源码放到textarea里方便复制 #

如果你想让弹窗里显示可复制的HTML源码，把写入弹窗的代码改成这一行：

$(popupWin.document.body).html(`<textarea style="width:100%;height:100%">${targetHtml.replace(/</g, "&lt;").replace(/>/g, "&gt;")}</textarea>`);

这样弹窗里会出现一个铺满窗口的textarea，里面是转义后的HTML源码，用户可以直接选中复制。

内容的提问来源于stack exchange，提问作者Advi