单击按钮时如何克隆html页面答案

【问题标题】：how to clone html page when button cllick单击按钮时如何克隆html页面
【发布时间】：2020-09-23 05:34:58
【问题描述】：

当我点击时如何在新的_blank页面中克隆html

btn_change_folder_style_seg

btn_change_folder_style_raw

那么内容就是

<img src="./pic/web_show/3_seg/01.jpg" alt="">
<img src="./pic/web_show/3_seg/02.jpg" alt="">

和

<img src="./pic/web_show/3_raw/01.jpg" alt="">
<img src="./pic/web_show/3_raw/02.jpg" alt="">

现在是完整代码

<img src="./pic/web_show/3/01.jpg" alt="">
<img src="./pic/web_show/3/02.jpg" alt="">
<img src="./pic/web_show/3/03.jpg" alt="">

<input type="button" id="btn_change_folder_style_seg" value="style seg"></input>
<input type="button" id="btn_change_folder_style_raw" value="style raw"></input>

<script>
    $(function() {
        $('#btn_change_folder_style_seg').click(function() {
            alert("style_seg")
            var imagePath = $('img');
            imagePath.attr('src', function(index, attr) {
            if (attr) {
                return attr.replace('3/', index + 1 + '_seg/');
            }
            });
        });
        $('#btn_change_folder_style_raw').click(function() {
            alert("style_raw")
            var imagePath = $('img');
            imagePath.attr('src', function(index, attr) {
            if (attr) {
                return attr.replace('3/', index + 1 + '_raw/');
            }
            });
        });
    })
</script>

【问题讨论】：

“克隆 html 页面”是什么意思？您可以在新窗口/选项卡中打开同一页面。请澄清。
是，但新页面内容必须更改
如果大部分页面保持不变，为什么还要更改页面？ atag 和这有什么关系？
新建一个html页面，复制粘贴代码，修改内容

标签： html clone atag

【解决方案1】：

首先需要选中HTML标签，然后通过cloneNode(true)方法进行复制，必须加上true才能复制它的子节点

然后您可以根据需要编辑克隆的 HTML（删除 elm - 编辑 elm 等）

因此你必须通过 (.outerHTML) 将其转换为字符串

之后，您必须创建一个新的 Blob 对象实例并在其中附加字符串化的内容并添加文件的类型

const file = new Blob([content], {type: 'text/html'});

那么你将需要锚标签来创建你的 HTML 文件的下载链接

a.href = URL.createObjectURL(文件);

如果点击按钮标签，则触发锚标签被点击

这就是我希望这个 sn-p 进一步澄清我的答案的全部内容

// select button
const btn = document.getElementById('btn');

// add click event
btn.addEventListener('click', () => {
    // Select anchor
    const a = document.getElementById('a');

    // select html tag
    const html = document.querySelector('html');
    // clone html
    const clonedHtml = html.cloneNode(true);

    // select elements
    const body = clonedHtml.querySelector('body');
    // wipe out body
    body.innerHTML = '';

    // create div
    const div = document.createElement('div');
    // add text
    div.innerText = 'new div';
    // append div
    body.append(div);

    //* append to content
    let content = `<!DOCTYPE html>`;
    content += clonedHtml.outerHTML;
    console.log(content);

    // create HTML file
    let file = new Blob([content], {
        type: 'text/html'
    });

    // add href link
    a.href = URL.createObjectURL(file);
    // name file
    a.download = 'New.html';
    // run click
    a.click();

});

<div class="div1">1</div>
<div class="div2">2</div>

<button type="button" id="btn">Generate HTML file</button>
<a id="a" href="" style="display: none;"></a>

【讨论】：