프론트엔드/Tips

[자바스크립트] Iframe 내부 요소 수정하기

Marshall K 2019. 2. 19. 19:30

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


위 스크립트는 제가 이 포스트에서 타임라인 수정을 위해 사용한 스크립트입니다.