從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