在 URL 查询字符串中指定样式答案

【问题标题】：Specify style in URL query string在 URL 查询字符串中指定样式
【发布时间】：2012-01-15 02:45:04
【问题描述】：

假设我有一个网页

http://foo.com/bar.html

我有什么方法可以提供指向该页面的链接，例如，使所有 <b> 部分变为红色？

我猜我需要 bar.html 中的一些脚本和类似的 URL

http://foo.com/bar.html?style="b{color:red;}"

这可能吗？如果可以，有标准的方法吗？

【问题讨论】：

为什么是这种方式而不是 CSS？
@T9b，用户可能想突出显示外部页面上的内容（我的假设）
@T9b 目标文档始终相同 - 我希望根据引用者的 href 突出显示它的不同部分。

标签： javascript html css url

【解决方案1】：

您可以通过location.search 读取查询字符串，然后将您想要的任何逻辑应用于您返回的字符串。

小心不要让自己受到 XSS 攻击。

【讨论】：

【解决方案2】：

您可以自定义 javascript 来做任何您想做的事情。没有预先存在的通用方法。

您可以检查document.location.hash 以提取一个值并为b 元素添加新样式。查询字符串解析有点困难，因为它不是默认内置在 JS 中的。

【讨论】：

@paperjam 在 URL 中传递代码并不常见。也不应该是

【解决方案3】：

您可以将处理程序添加到链接元素。

你可以这样做：

document.getElementById('clickme').onclick = function(){

    var bolds = document.body.getElementsByTagName("b");
    for(var i = 0; i < bolds.length; i++){
         bolds[i].style.backgroundColor = 'red';
    }

}

演示：http://jsfiddle.net/maniator/HH2Cv/

【讨论】：

所以这是源 URL 上的脚本？

【解决方案4】：

为什么不试试 CSS 呢？

inside example.css file:
br 
{
color:red;
}

【讨论】：

【解决方案5】：

我想说最简单和最抽象的方法就是将样式直接附加到头部。尽管如此，如前所述，您可能想要解析它并验证其正确格式并避免攻击。您将让每个网络用户直接访问您脑海中的样式表。

window.onload = function() {
  if(document.location.search.indexOf('style=')>-1) {
    var style = decodeURI(document.location.search.substring(document.location.search.indexOf('style=') + 6));
    if(style.indexOf(',')>-1) { style = style.substring(0,style.indexOf(',')); }
    var elem = document.createElement('style');
    elem.type='text/css';
    elem.innerHTML = style;
    document.head.appendChild(elem);
  }
};

然后你可以像?style=body{background-color:blue;}%20b{color:red;}这样向你的URI添加任何和所有的样式修改

【讨论】：

关于攻击 - 可能发生的更糟糕的情况是什么？碰巧这不是供公众消费的（目前），所以这是一个有争议的问题。