Add CSS styles to an element

Question

Consider an application that has classes 'app-header' and 'app-body'. In the body of the app, I'm using an iframe tag that displays another webpage which makes uses of the same 'app-header' class that my app uses. Need to disable the 'app-header' and just show the body of the page embedded inside my app. Also disabling the app-header doesn't disable my app's header.

A brief overview of my code.

My plans is to add the display:none property to the app-header css for the web page embedded inside my app. The problem is how to add css for an element alone (in my case - 'display:none' applies to iframe tag alone). Also I'm planning to use javascript and strictly no PHP.

Community · Accepted Answer · 2017-05-23 12:16:47Z

1

I'm assuming the reason why this is an issue is because both the iframe source and the page itself use the same HTML. You could add a stylesheet to the head of the page after checking to see if the page is the top frame:

// shamelessly jacked from https://stackoverflow.com/questions/11833759/add-stylesheet-to-head-using-javascript-in-body
if(self !== top) {
    var head = document.head
      , link = document.createElement('link')

    link.type = 'text/css'
    link.rel = 'stylesheet'
    link.href = '/path/to/additional/stylesheet.css'

    head.appendChild(link)
}

Add stylesheet to Head using javascript in body
How to tell if current frame is parent?

edited May 23, 2017 at 12:16

CommunityBot

11 silver badge

answered Feb 23, 2016 at 15:34

Joseph Marikle

78.8k18 gold badges114 silver badges130 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Jamie Paterson · Accepted Answer · 2016-02-23 15:30:14Z

0

Anything in an iframe will not be effected by your css as that would be a security problem - its built that way so feel free to use any styles you want and they wont cascade to the iframe. Unless of course your iframe is hosted in the same url/domain.

answered Feb 23, 2016 at 15:30

Jamie Paterson

4463 silver badges10 bronze badges

4 Comments

yKW Over a year ago

So @Jamie, you mean to say its impossible?

Jamie Paterson Over a year ago

Correct in the circumstance of you not hosting the iframe too.

yKW Over a year ago

Okie @Jamie. Any other solution for the above problem so that I can pull in a portion of web page (meaning a <div> element) and project in my app?

Jamie Paterson Over a year ago

Sorry, if you do not control the page you are pulling in through the iframe then there is nothing you can do. Imagine if someone wanted your web page in theirs as it could be really popular etc but didn't want your logo in the header and could strip it out. You could ask them for an api if you need some of their content if they provide this service? Hope this clarifies as the correct answer for you.

Collectives™ on Stack Overflow

Add CSS styles to an element

2 Answers 2

Comments

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related