0

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.

enter image description here

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.

Avinesh
  • 584
  • 3
  • 13
  • 31

2 Answers2

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?

Community
  • 1
  • 1
Joseph Marikle
  • 76,418
  • 17
  • 112
  • 129
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.

Jamie Paterson
  • 426
  • 3
  • 10
  • So @Jamie, you mean to say its impossible? – Avinesh Feb 23 '16 at 17:04
  • Correct in the circumstance of you not hosting the iframe too. – Jamie Paterson Feb 24 '16 at 08:58
  • Okie @Jamie. Any other solution for the above problem so that I can pull in a portion of web page (meaning a
    element) and project in my app?
     – Avinesh Feb 24 '16 at 09:04
  • 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. – Jamie Paterson Feb 24 '16 at 15:21