I'm trying to inject some css to the body of my SharePoint webpage for a background image. The .js is essentially this:
document.body.style.backgroundImage = <My Image URL>
document.body.style.backgroundSize = "50%"
document.body.style.backgroundPosition = "50% 50%"
And it works as I expect, unless there's an iFrame in the middle (or any other 'body' tag). Then the image gets put inside the iFrame as well as the body of my page. The iFrames are things like 'Add a Document' or adding events to calendars that don't redirect the page. They're not up all the time but I don't want the image there, regardless.
All of the body tags have the same generic setup ( <body class="ms-backgroundImage" style="..." spellcheck="false">
) regardless of if they're the site's actual Body tag or if it's the iFrame's body. The only difference is the iFrames have a tabindex
attribute. I've tried to add if(!document.body.hasAttribute('tabindex')){...}
but it doesn't work. Still adds to both the iFrame and main document's body.
Is there a way with Javascript to say "Apply to the main body, but not to any others"?
EDIT: Showing the image of it not working properly...
EDIT 2: Updating the question to better reflect the situation.
document.body.classList.add("isDlg");
and check ?document.body.classList.add("isDlg");
to the referenced js sheet