2015-07-01 2 views
2

У меня есть страница HTML, содержащая тег привязки, мне нужно удалить определенный стиль, применяемый уже на html-странице для тега привязки, когда открыта страница html throw iframe.Удалить определенный стиль CSS из Html Страница

HTML Content, как показано ниже:

<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" также эти стили применяла.

+0

показать нам html, чтобы помочь вам – edu

+0

@edu sample html content updated – RGA

ответ

-1

Я не знаю, как определить, открыта ли страница в iframe или нет, но есть одно возможное (не очень приятное) обходное решение, вы можете установить iframe на ширину, которая обычно не используется устройствами (пример 463px), а затем задайте мультимедийный запрос для этого разрешения, который применяется, когда контент отображается в этом iframe. Это действительно противный способ, поскольку его не 100%, и я бы не рекомендовал этого.

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> 

код для загрузки CSS с JavaScript от How to load up CSS files using Javascript?.

При всем этом коде вы можете просто написать (даже только после этого внутри <script> блока):

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

Конечно же метод может быть применен к патч CSS с iframe конкретных стилей:

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