how to clone html page when button cllick

Question

Welcome To Ask or Share your Answers For Others

how to clone html page when button cllick

posted Jan 31, 2022 in Technique[技术] by 深蓝 (71.8m points)

how to clone html page when button cllick

how to clone html in new _blank page when i click

btn_change_folder_style_seg

btn_change_folder_style_raw

then content will be

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

and

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

now full code

<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>

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…

1 Reply

深蓝 · Answer 1 · 2022-01-31T07:21:24+0000

First of all, you need to select HTML tag and then make a copy of it through the cloneNode(true) method, you must add true to copy its children

then you can edit your cloned HTML as you want (delete elm - edit elm and so on)

therefore you gotta convert it to a string through (.outerHTML)

after that, you have to create a new instance of Blob Object and append the stringified content in it and add the type of your file

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

then you will need anchor tag to create the download link of you HTML file

a.href = URL.createObjectURL(file);

then trigger anchor tag to be clicked if you clicked the button tag

that's all I hope this snippet clarify my answer more

// 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>

Categories

how to clone html page when button cllick

how to clone html page when button cllick

Please log in or register to add a comment.

Please log in or register to reply this article.

1 Reply

Please log in or register to add a comment.

Just Browsing Browsing

Most popular tags