Question

我有一个带有锚标记的Html页面，我需要删除已经在html页面中为锚标记应用的某些样式，同时打开html页面抛出iframe。

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;
}

但内部＆＃34; iframe＆＃34;这些风格也一直在应用。

Answer 1

您必须首先检测您的网页是否在iframe内呈现，并且在这种情况下应用替代CSS。它不能用vanilla 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的代码来自How to load up CSS files using Javascript?。

使用所有代码，您可以简单地编写（即使在<script>块内部之后）：

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

当然，同样的技术可以应用于具有iframe特定样式的 patch CSS：

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

Answer 2

我不知道如何检测页面是否在iframe中打开，但是有一种可能的（不是非常好的）解决方法，您可以将iframe设置为宽度，这是设备不常用的（例如463px）然后设置此分辨率的媒体查询，在此iframe中显示内容时适用。这是非常讨厌的方式，因为它不是100％，我不会推荐。

从Html页面删除某些CSS样式

2 个答案: