使用 Jquery/javascript 將 Html 內容復制到彈出窗口

Question

我有一個彈出圖標 onclick，它應該使用 jquery/javascript 將 Html 內容復制到彈出 window。 我嘗試了幾件事，但最終創建了彈出窗口 window，因為我是新手。 任何幫助，將不勝感激。 下面是我的代碼。 由於某些錯誤，代碼無法在片段中運行。 請幫忙

 $(document).ready(function () { $("#OpenDialog").click(function () { var w = window.open("", "popupWindow", "width=600, height=400, scrollbars=yes"); var $w = $(w.document.body); $w.html("<textarea></textarea>"); }); });

 <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> </br> <div class="data_copy"> <p>html data to copy</p> <p>test</p> <input type="text" /> <button type="button">testing </button> </div>

Answer 1

試試這個 jquery

<script type="text/javascript">

    $(document).ready(function () {
            $("#OpenDialog").click(function () {
                var w = window.open("", "popupWindow", "width=600, height=400, scrollbars=yes");
                var $w = $(w.document.body);
                var clone = $('.data_copy').clone();
                $w.html(clone);
            });
        });
    
    
</script>

Answer 2

window.open 在這里不起作用，請在 JSFiddle 中嘗試我的代碼。

 $(document).ready(function () { $("#OpenDialog").click(function () { var w = window.open("", "popupWindow", "width=600, height=400, scrollbars=yes"); var $w = $(w.document.body); var htmltocopy = $('.data_copy').html(); $w.html('<div class="data_copy">' + htmltocopy + '</div>'); }); });

 <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> </br> <div class="data_copy"> <p>html data to copy</p> <p>test</p> <input type="text" /> <button type="button">testing </button> </div>

Answer 3

你錯過了腳本標簽。

<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> 
    </br>
  <div class="data_copy">
    <p>html data to copy</p>
    <p>test</p>
    <input type="text" />
    <button type="button">testing </button>
  </div>
<script>
$(document).ready(function () {
    $("#OpenDialog").click(function () {
        var w = window.open("", "popupWindow", "width=600, height=400, scrollbars=yes");
        var $w = $(w.document.body);
        $w.html("<textarea></textarea>");
    });
});
</script>