Iframe으로 가져오는 요소들은 css로 백날 건드려봐야 수정할 수 없습니다.
하지만, 간단한 스크립트를 통해 내부에 있는 요소들을 수정 / 제거할 수 있습니다.
예를 위해 https://publish.twitter.com/ 에서 불러온 트위터 타임라인을 수정해보겠습니다.
550px로 높이를 변경하는 커스터마이징만 하고 가져온 타임라인입니다.
수정된 타임라인입니다.
상단과 하단에 고정돼있던 header와 footer를 제거하고, 크롬에서 스크롤바의 모양을 변경했습니다.
HTML (예시)
1 | <iframe src="" frameborder="0" id="iframe"></iframe> | cs |
JS
1 2 3 | $("#iframe").one("load", function() { $("#iframe").contents().find(/*something*/).remove() }) | cs |
상술한 트위터 타임라인을 불러오는 스크립트는 형태가 조금 다르기에
HTML (예시)
1 | <a class="twitter-timeline" data-height="350" href="https://twitter.com/JYPETWICE?ref_src=twsrc%5Etfw"></a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script> | cs |
JS
1 2 3 | $("#iframe-wrapper").bind("DOMNodeRemoved", function() { $("#twitter-widget-0").contents().find(/*something*/).remove() }) | cs |
같은 방법으로 사용하셔야 합니다.
1 2 3 4 5 | $(".iframe-wrapper").bind("DOMNodeRemoved", function() { $("#twitter-widget-1").contents().find(".timeline-Header, .timeline-Footer").remove(), $("#twitter-widget-1").contents().find(".timeline-Viewport").height(550), $("#twitter-widget-1").contents().find(".SandboxRoot").append("<style>::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-thumb{background:#ff7c94;border-radius:10px}</style>") }) | cs |
위 스크립트는 제가 이 포스트에서 타임라인 수정을 위해 사용한 스크립트입니다.
