从HTML页面删除某些CSS样式

Question

我有一个带有锚标签的HTML页面，我需要在打开html页面时删除已在html页面中应用的某些样式作为锚标签。

HTML内容如下：

<html>
<body>
<div>some content<a href="http://www.website.com" name="test1"/> some content </div>
</body>
</html>

我尝试如下：

    a[name^="test1"]:before{
content:"[prefix text]";
display:inline;
color:red;
}
a[name^="test1"]:after{
content:"suffix text";
display:inline;
color:green;
}
iframe a[name^="test1"]:before{
display:none;
}
iframe a[name^="test1"]:after{
display:none;
}

但是在“ iframe”中，这些样式也一直在应用。

Answer 1

您必须首先检测您的网页是否在iframe呈现，然后使用其他CSS。 不能使用原始CSS来完成，而必须使用一些JavaScript来完成：

<script type="text/javascript">
    function getTopWindow() {
        try {
            return window.top;
        } catch {
            // If we can't access window.top then browser is restricting
            // us because of same origin policy. 
            return true;
        }
    }

    function isRendererdInFrame() {
        // If top window is null we may safely assume we're in iframe
        return window.self !== getTopWindow();
    }

    function loadCss(location) {
        if(document.createStyleSheet) {
            document.createStyleSheet('http://server/stylesheet.css');
        } else {
            var styles = "@import url('" + location + "');";
            var newSS=document.createElement('link');
            newSS.rel='stylesheet';
            newSS.href='data:text/css,'+escape(styles);
            document.getElementsByTagName("head")[0].appendChild(newSS);
        }
    }
</script>

从JavaScript加载CSS的代码来自如何使用JavaScript加载CSS文件？ 。

使用所有这些代码，您可以简单地编写（甚至在<script>块之后）：

var cssToLoad = isRendererdInFrame() ? "iframe.css" : "not-iframe.css";
loadCss("http://server/" + cssToLoad);

当然，可以将相同的技术应用于具有iframe特定样式的CSS 修补程序 ：

if (isRenderedInFrame())
    loadCss("http://server/iframe-patch.css");

Answer 2

我不知道如何检测是否在iframe中打开了页面，但是有一种可能的方法（不是很好），您可以将iframe设置为设备不常用的宽度（例如463px），然后为此分辨率适用于在此iframe中显示内容时。 这真的是一种讨厌的方式，因为它不是100％，我不建议这样做。

从HTML页面删除某些CSS样式

问题描述

2 个解决方案

解决方案1
1 2015-07-01 10:34:02

解决方案2
-1 2015-07-01 10:29:29

从HTML页面删除某些CSS样式

问题描述

2 个解决方案

解决方案1 1 2015-07-01 10:34:02

解决方案2 -1 2015-07-01 10:29:29

解决方案1
1 2015-07-01 10:34:02

解决方案2
-1 2015-07-01 10:29:29