html - 单击按钮时如何克隆html页面
问题描述
单击时如何在新的_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 标签,然后通过 cloneNode(true) 方法对其进行复制,你必须添加 true 来复制它的孩子
然后您可以根据需要编辑克隆的 HTML(删除 elm - 编辑 elm 等)
因此,您必须通过 (.outerHTML) 将其转换为字符串
之后,您必须创建 Blob 对象的新实例并在其中附加字符串化内容并添加文件的类型
const file = new Blob([content], {type: 'text/html'});
那么您将需要锚标记来创建您的 HTML 文件的下载链接
a.href = URL.createObjectURL(文件);
如果单击按钮标记,则触发锚标记被单击
这就是我希望这个片段更能澄清我的答案
// 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>
推荐阅读
- javascript - 科尔多瓦准备然后运行与科尔多瓦平台添加然后运行什么?
- sql - 基于自加入的更新
- ios - 将应用程序上传到 Apple Store Connect 失败
- javascript - 响应式标签 - Wordpress
- git - 克隆 GitLab 存储库时权限被拒绝?
- sql-server - 当日期字段中的值为 NULL 时,创建 SSIS 包以将单词“NULL”提取到 Excel 文件
- android - OAuthAccessTokenException - 提供的 access_token 无效 Instagram 新 api
- typescript - 从量角器的网格中选择下拉值
- aem - 未找到“/bin/page3”处的资源:未找到资源
- c# - 访问时类变量的值始终为空