什么是一个可靠的方法来实现一个始终在顶部覆盖在一个html页面，它可以注入到任何现有的页面

What is a reliable way to implement an always on top overlay in a html page, which can be injected to any existing page?

本文关键字：一个 注入 页面 任何现 方法 实现 覆盖 顶部 什么 html      更新时间：2023-09-26

请注意:我不是在寻找实现(我会自己投入努力)，我是在寻求开始和/或使用哪种方法的方向。

我想实现一个通用的始终在顶部可移动(和可选的可调整大小)的窗口/覆盖在html页面上。(请注意，这不应该是浏览器插件/扩展)

这个UI元素应该被注入到任何(几乎任何?)现有的页面，而不干扰现有的UI和，而没有现有的页面应该知道/关心这个被注入的部分。(注入将在服务器端完成)

什么是CSS/Html/Javascript方法来实现这一点?(我们可以安全地假设/需要现代浏览器)

in javascript: 

div = document.createElement('div');
div.setAttribute('id','someuniquecontianerthingy');
document.body.appendChild(div);

或jQuery

$(document.body).append('<div id="someuniquecontianerthingy"/>');

然后应用重置CSS只对该div和它的子添加默认颜色和背景颜色和边框值，它也覆盖你的基础。然后在所有css类前加上div#someuniquecontianerthingy

你可以通过

动态加载css
function loadCss(filename){
   var file=document.createElement("link");
   file.setAttribute("rel", "stylesheet");
   file.setAttribute("type", "text/css");
   file.setAttribute("href", filename);
   if (typeof fileref!="undefined")
       document.getElementsByTagName("head")[0].appendChild(fileref)
 }
 loadCss("mystyle.css", "css")

，然后将样式应用到您的页面。同样的函数稍微修改一下，你可以使用脚本文件来加载你的javascript。

为了确保你的css不会"影响当前页面布局"，你需要将位置设置为fixed或absolute，根据你的需要。这样，页面就不会"拉伸到合适的位置"，也不会有很大的空白。

你的CSS必须像

div#someuniquecontianerthingy a { //somecode }
div#someuniquecontianerthingy a:hover { //somecode }
div#someuniquecontianerthingy  {
    position:fixed;
    top:0px;
    left:0px;
    color:#000;
    background:#FFF; 
}

，并确保定义每个属性，你可以想到的方式，你想要它的外观，边框等。还要确保为你的样式选择唯一的id类，这样你就有了独特性。不要在id/class较少的东西上使用特定的样式。这样你就可以通过它们的特异性计算打败大多数样式表。

在CSS重置中，你会有像

这样的大块
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {

你需要在每个值前加上你唯一的选择器

div#someuniquecontianerthingy html, 
div#someuniquecontianerthingy body, 
div#someuniquecontianerthingy div, 
div#someuniquecontianerthingy span, 
div#someuniquecontianerthingy applet, 
div#someuniquecontianerthingy object, 
div#someuniquecontianerthingy iframe,
div#someuniquecontianerthingy h1, 
div#someuniquecontianerthingy h2, 
div#someuniquecontianerthingy h3, 
etc... {
}

然后，这是一个问题，填写您的div与您想要通过您的javascript脚本的内容。如果您使用jQuery，请确保使用noConflict变体，这样您将始终拥有与您的代码兼容的自己的jQuery版本。

这需要大量的工作，即使你试图避免所有的问题，你的代码可能会崩溃，或者设计可能会崩溃，但如果你采取了这些步骤，它应该是稳定的。

相关文章：