Question

我有一个位于iframe页面上的JavaScript，并抓取父页面css以使页面具有对页面其余部分的无缝外观。我遇到了一个问题，就是选择错误的样式。如何定位iframe中的特定标记（例如h1，h3`等）？

var getFontFamily = function(){

    for(var i = 0; i < document.styleSheets.length; i++){
        for(var j = 0; j < document.styleSheets[i].rules.length; j++){

            if(document.styleSheets[i].rules[j].style.fontFamily){
                return document.styleSheets[i].rules[j].style.fontFamily;
            }
        }
    }

    return 'not-found';
};

window.addEventListener('load', function(){
    var data = getFontFamily();

    window.frames[0].postMessage(data, 'http://localhost:3000');

    console.log('Message sent -->');
});

当前版本：jsfiddle

这是需要将父页面的css应用于的HTML：

<div class="info">
            <div class="lead">Message Lead</div>
            <h2>Title</h2>

            <div class="ticker">
                <div class="ticker__also">Also</div>
                <ul class="ticker__list">
                    <li><a href="#">sub headline</a></li>
                    <li><a href="#">sub headline</a></li>
                    <li><a href="#">sub headline</a></li>
                </ul>
            </div>
        </div>

    <div class="extras">
        <div class="title">Extra info</div>
        <a class="link" href="http://www.url.tv" target="_blank">Link</a>

        <div class="share">
            <a class="twitter">Twitter</a>
            <a class="facebook">Facebook</a>
            <a class="email">E-mail</a>
        </div>
    </div>

Answer 1

您可以直接通过style属性和window.getComputedStyle方法从元素中获取样式。这比仅仅获取CSS规则列表中出现的第一个结果更准确（在这里你也只能找到选择器，而不是应用样式的实际元素）。

MDN page about the style attribute有一些简单的例子，出于您的目的，它可能看起来像这样。

var getFontFamily = function() {
  var el = document.getElementById(id);
  var cs = window.getComputedStyle(el, null);
  return cs.fontFamily || '';
}

用postMessage抓取父页面css

1 个答案: