关于 JS动态生成的 iframe 引入CSS 的踩坑

最新推荐文章于 2024-05-16 16:35:47 发布

Sam9029

最新推荐文章于 2024-05-16 16:35:47 发布

阅读量2.7k

点赞数 1

文章标签： css javascript 前端

本文链接：https://blog.csdn.net/m0_61486963/article/details/126084047

版权

解决的结论：

本地使用时
相对路径和绝对路径突然又都行了只不过要第二次按打印效果在会出现😂
iframe 中的 css样式引入要写绝对路径（直接从盘的位置开始写）
- 如<link rel='stylesheet' type='text/css' href='E:/编程/前端基础练习/Vue_学习/Resume/resumeProject/test/printContent.css'>
- 注意可能需要多刷新几次，才有效果（诶，不知道咋回事，我的就是要多刷新几次才有效果，有时候又不需要）
线上使用–待探究（若知晓望告知，感谢🙇‍）

残留问题： frame 本身是一个框架通过href 引入文件，那一定有文件位置，但是通过JS动态生成的iframe 和其内容文件位置又在哪里？

注意：src 和 href 引入在网络请求都有记录

！以下为踩坑的缘由和过程：

JS动态生成的iframe 引入CSS 目的：

通过动态生成 iframe 来执行页面特定区域打印
同时使用外部 css 来控制打印区域的样式

（可解决问题）源码 - JS动态创建 iframe 标签及其内容innerHTML

// 获取 需要打印的区域
var el = document.getElementById("printcontent");
// 创建 iframe 元素标签
iframe = document.createElement('IFRAME');
//
var doc = null;
//设定 iframe 元素标签 id, 以供调用
iframe.setAttribute("id", "print-iframe");
// 设定 iframe 元素标签 样式！！
// 即 使其 脱离文档流
iframe.setAttribute('style', `
    position:absolute;
    width:0px;
    height:0px;
    left:-500px;
    top:-500px;
`);
// 将 iframe 添加到 body 中
document.body.appendChild(iframe);

//contentDocument 属性能够以 HTML 对象来返回 iframe 中的文档。
doc = iframe.contentWindow.document;
doc.write(`
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>My Resume</title>
        <!-- ！！引入 控制iframe 打印的css -->
        <!-- ！！诱发 坑 的地方 -->
        <link rel='stylesheet' type='text/css' href='E:/编程/前端基础练习/Vue_学习/Resume/resumeProject/test/printContent.css'>
    </head>
    <body>
        ${el.innerHTML}
    </body>
    </html>
`)

！⭐注意所在之处 doc.write 里面的 link写入css样式

<!-- ！！引入 控制iframe 打印的css -->
<link rel='stylesheet' type='text/css' href='E:/编程/前端基础练习/Vue_学习/Resume/resumeProject/test/printContent.css'>

以下为问题发生和分析问题过程（可不看）

文件目录

- project
	- 	test
		- 	index.html
		-  content.css

说明：在index.html 中JS动态生成的 iframe,并外部引入css（即content.css文件）

1. 本来使用的相对路径

注意link 是在源码中的 doc.write 写入的
<link rel='stylesheet' type='text/css' href='./printContent.css'>
- 但就是没有效果
我左想，有右想就是，就不知道这么回事！！改了多次路径信息（都是相对的），都不行

思考：iframe 本身是一个框架通过href 引入文件，那一定有文件位置，但是通过JS动态生成的iframe 和其内容文件位置又在哪里？

2. 开始测试直接在index.html中引入

<link rel='stylesheet' type='text/css' href='./printContent.css'>
打开控制台 =》查看网路请求 =》1的（index.html引入）结果显示正常

在这里插入图片描述

额，本来😂 相对路径的请求会报错的，突然又行了
1的（index.html引入）
2的（JS动态生成的iframe 的引入）
在这里插入图片描述

不写了。淦他娘的！

Sam9029

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
关于 JS动态生成的 iframe 引入CSS 的踩坑

关于 JS动态生成的 iframe 引入CSS 的踩坑
复制链接

扫一扫

关于 JS动态生成的 iframe 引入CSS 的踩坑

解决的结论：

JS动态生成的iframe 引入CSS 目的：

（可解决问题）源码 - JS动态创建 iframe 标签 及其内容innerHTML

！⭐注意所在之处 doc.write 里面的 link写入css样式

以下为问题发生 和 分析问题过程（可不看）

文件目录

1. 本来使用的相对路径

思考：iframe 本身是一个框架 通过href 引入文件，那一定有文件位置，但是通过JS动态生成的iframe 和其内容 文件位置又在哪里？

2. 开始测试 直接在index.html中引入

“相关推荐”对你有帮助么？

（可解决问题）源码 - JS动态创建 iframe 标签及其内容innerHTML

以下为问题发生和分析问题过程（可不看）

思考：iframe 本身是一个框架通过href 引入文件，那一定有文件位置，但是通过JS动态生成的iframe 和其内容文件位置又在哪里？

2. 开始测试直接在index.html中引入