单击按钮时如何克隆html页面 [英] how to clone html page when button cllick
问题描述
当我单击时如何在新的_blank页面中克隆html
how to clone html in new _blank page when i click
btn_change_folder_style_seg
btn_change_folder_style_seg
btn_change_folder_style_raw
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标记和然后通过cloneNode（true）方法对其进行复制，必须添加true才能复制其子项
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
然后您可以根据需要编辑克隆的HTML（删除Elm -编辑elm等）
then you can edit your cloned HTML as you want (delete elm - edit elm and so on)
因此，您必须通过（.outerHTML）将其转换为字符串
therefore you gotta convert it to a string through (.outerHTML)
之后，您必须创建一个新的Blob对象实例，并在其中添加字符串化内容并添加文件类型
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文件=新的Blob（[content]，{type：'text / html'}）;
const file = new Blob([content], {type: 'text/html'});
然后，您将需要定位标记来创建HTML文件的下载链接
then you will need anchor tag to create the download link of you HTML file
a.href = URL.createObjectURL（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>
div>
这篇关于单击按钮时如何克隆html页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
