<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>插件公告</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<style type="text/css">
.zsl-full_coverlayer{
position: fixed;
display: block;
width: 100%;
height: 100%;
}
.zsl-full_coverlayer:before {
display: block;
width: 100%;
height: 100%;
content: '';
background-color: black;
opacity: 0.7;
}
.zslm-notice{
position: absolute;
display: block;
z-index: 100;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.zslm-notice>*{
display: block;
width: 80%;
height: 85%;
max-width: 1220px;
margin: 60px auto 0;
padding: 10px;
}
.zslm-notice .zsl-flex_box{
height: 100%;
display: flex;
flex-direction: column;
}
.zslm-notice .zsl-flex_box article{
flex: 1;
overflow: auto;
padding: 0 10px 50px;
box-sizing: border-box;
verflow: -moz-scrollbars-none;
}
.zslm-notice .zsl-flex_box .zsl-iframe{
min-height: 100%;
verflow: -moz-scrollbars-none;
}
.zslm-notice .zsl-flex_box article::-webkit-scrollbar , .zslm-notice .zsl-flex_box .zsl-iframe::-webkit-scrollbar {
width: 0 !important }
.zslm-notice header{
display: block;
position: relative;
line-height: 32px;
padding-bottom: 10px;
border-bottom: 1px solid rgb(204, 204, 204);
}
.zslm-notice .zsl-close_notice{
position: absolute;
display: block;
top: 0;
right: 0;
width: 32px;
height: 32px;
cursor: pointer;
}
.zslm-notice .zsl-close_notice:hover {
color: red;
}
.zslm-notice .zsl-close_notice:before{
display: block;
content: "X";
line-height: 32px;
text-align: center;
font-size: 16px;
}
.zslm-notice header h1{
font-size: 18px;
line-height: inherit;
text-align: justify;
font-weight: bold;
padding-right: 32px;
}
.zslm-notice .zsl-flex_box footer{
height: 50px;
margin-bottom: -50px;
text-align: center;
line-height: 50px;
}
</style>
</head>
<body>
<div class="zsl-wrap">
<div class="zsl-full_coverlayer">
<ul class="zslm-notice">
<li style="background-color: #fff;">
<div class="zsl-flex_box">
<header>
<i class="zslj-close_notice zsl-close_notice" title="关闭" data-type="1" data-parent="li"></i>
<h1>这是牛魔王公告标题</h1>
</header>
<article>
<div class="zsl-iframe">
</div>
<footer>
<button class="zsl-btn zsl-btn_warm">不再提示</button>
</footer>
</article>
</div>
</li>
</ul>
</div>
</div>
<script type="text/javascript">
this.zslQ = jQuery.noConflict(true);
var html = `<style>img{max-width: 100%;}</style><!-- 公告内容载体 --> <h3 data-spm-anchor-id="a2g0o.home.0.i6.650c21457AFncS">\n\t<span style="color:#E53333;">牛魔王数据助手1.0.2.1更新内容<br>\n</span><span style="color:#E53333;">1、新增速卖通产品库存监控功能，更精准监控竞品销量<br>\n</span><span style="color:#E53333;">2、新增虾皮7个站点数据插件<br>\n</span><span style="color:#E53333;">3、修复已知若干问题</span>\n</h3>\n<h3>\n\t<span style="color:#000000;">一、速卖通库存监控功能简介</span>\n</h3>\n<p>\n\t<span style="color:#E53333;"><img src="https://upload.newmorehot.com/Uploads/Editor/2020-10-22/5f912b1b6ee55.jpg" alt=""><br>\n</span>\n</p>\n<p>\n\t<br>\n</p>\n<h3 data-spm-anchor-id="a2g0o.home.0.i2.650c21457AFncS">\n\t点击列表添加库存监控可以每小时监控该产品库存变化\n</h3>\n<p>\n\t<img src="https://upload.newmorehot.com/Uploads/Editor/2020-10-22/5f912b4fb258a.jpg" alt="">\n</p>\n<h3>\n\t通过监控管理查询监控历史，监控管理功能需要速卖通VIP会员以上权限\n</h3>\n<p>\n\t<img src="https://upload.newmorehot.com/Uploads/Editor/2020-10-22/5f912b7c3d187.jpg" alt="">\n</p>\n<h3>\n\t添加监控后，在每个整点会自动记录一次产品库存，注意！需要你的浏览器在开启黄台下才可以自动记录，如果在整点时候浏览器没有开启，则该时间段的库存不会被记录\n</h3><h3>\n\t添加监控后，在每个整点会自动记录一次产品库存，注意！需要你的浏览器在开启黄台下才可以自动记录，如果在整点时候浏览器没有开启，则该时间段的库存不会被记录\n</h3><h3>\n\t添加监控后，在每个整点会自动记录一次产品库存，注意！需要你的浏览器在开启黄台下才可以自动记录，如果在整点时候浏览器没有开启，则该时间段的库存不会被记录\n</h3><h3>\n\t添加监控后，在每个整点会自动记录一次产品库存，注意！需要你的浏览器在开启黄台下才可以自动记录，如果在整点时候浏览器没有开启，则该时间段的库存不会被记录\n</h3><h3>\n\t添加监控后，在每个整点会自动记录一次产品库存，注意！需要你的浏览器在开启黄台下才可以自动记录，如果在整点时候浏览器没有开启，则该时间段的库存不会被记录\n</h3><h3>\n\t添加监控后，在每个整点会自动记录一次产品库存，注意！需要你的浏览器在开启黄台下才可以自动记录，如果在整点时候浏览器没有开启，则该时间段的库存不会被记录\n</h3><h3>\n\t添加监控后，在每个整点会自动记录一次产品库存，注意！需要你的浏览器在开启黄台下才可以自动记录，如果在整点时候浏览器没有开启，则该时间段的库存不会被记录\n</h3><h3>\n\t添加监控后，在每个整点会自动记录一次产品库存，注意！需要你的浏览器在开启黄台下才可以自动记录，如果在整点时候浏览器没有开启，则该时间段的库存不会被记录\n</h3><h3>\n\t添加监控后，在每个整点会自动记录一次产品库存，注意！需要你的浏览器在开启黄台下才可以自动记录，如果在整点时候浏览器没有开启，则该时间段的库存不会被记录\n</h3><h3>\n\t添加监控后，在每个整点会自动记录一次产品库存，注意！需要你的浏览器在开启黄台下才可以自动记录，如果在整点时候浏览器没有开启，则该时间段的库存不会被记录\n</h3>\n<p>\n\t<img src="https://upload.newmorehot.com/Uploads/Editor/2020-10-22/5f912bef1b29c.jpg" alt="">\n</p>\n<h3>\n\tSKU的库存记录一样可以进行监控\n</h3>\n<p>\n\t<br>\n</p>\n<p>\n\t</p><h3>\n\t\t二、虾皮数据插件功能简介\n\t</h3>\n\t<p>\n\t\t<img src="https://upload.newmorehot.com/Uploads/Editor/2020-10-22/5f912c3bdcec5.jpg" alt="">\n\t</p>\n\t<h3>\n\t\t可在列表上查询产品各项数据以及关注和下载产品图片\n\t</h3>\n\t<p>\n\t\t<img src="https://upload.newmorehot.com/Uploads/Editor/2020-10-22/5f912c7011015.jpg" alt="">\n\t</p>\n<p></p> `;
function appendShadowRoot(ele, html){
let root = zslQ(ele).get(0).attachShadow({
mode: 'open'});
let sonDom = document.createElement('div');
sonDom.style.overflow = 'hidden';
sonDom.innerHTML = html;
root.appendChild(sonDom);
}
appendShadowRoot('.zsl-iframe', html);
</script>
</body>
</html>
createShadowRoot(已废弃-有兴趣可了解，目前QQ浏览器还支持)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>shadowDOM</title>
<style type="text/css">
#div {
width: 300px;height: 50px;border: 1px solid #666;padding: 15px; }
</style>
</head>
<body>
<div id="div">这里是不显示出来的，如果你看到了，说明浏览器不支持ShadowDOM</div>
<button>点我点我</button>
<script type="text/javascript">
function createShadowDOM(elem) {
var root = elem.createShadowRoot();
root.appendChild(createStyle());
root.appendChild(createInputDiv("姓名","name"));
}
function createStyle() {
var style = document.createElement('style');
style.textContent = 'div.input-div { height: 30px; width: 250px; }' +
'font.input-font { line-height: 30px;font-size: 16px;color: #495A80; margin-right: 10px;}'+
'span.input-area {width: 200px;height: 25px;line-height: 25px;padding-left: 5px;display:inline-block;color: #666;font-size: 16px;border: 1px solid #999;border-radius: 3px;}';
return style;
}
function createInputDiv(font, name) {
var inputDiv = document.createElement('div');
inputDiv.innerHTML = "<font class='input-font'>" + font + "</font><span class='input-area' contentEditable='true' id=" + name + "></span>";
return inputDiv;
}
createShadowDOM(document.querySelector("#div"));
document.querySelector('button').addEventListener('click', function() {
alert(document.querySelector('#div').shadowRoot.querySelector('#name').innerHTML);
})
</script>
</body>
</html>
参考