0

I'm not sure how i'm able to do such a thing. I've been searching for an answer and have come up empty handed. I'm thinking javascript is the answer here but i'm just not sure how to implement it into the current script i'm using to change the theme of the site.

Thanks for any assistance!

NadaBlast
  • 1
  • 1

2 Answers2

0

If the iframe content is hosted externally, you can't modify it due cross-domain site scripting rules.

Justin B. Evans
  • 21
  • 3
0

Not really sure what you would change but you could do.

<iframe id="theframe" src="something.pdf" style="background-color: #FFF;" />

this would do it. or if you were to do it using css.

<iframe id="theframe" src="somthing.pdf"/>
CSS:
#theframe{
background-color: blue;
}

i am a little confused on what you wanted. did you want this to change while the user is on it or like change when you get tired of it?

EDIT: the color would only show up if the src does not load. otherwise it would have something in it.

EDIT: ok to do this with a button it would be (i am using the example above for reference) i will add a button(just one) and the script. Hope this helps.

    <script>
    function change(){
    if(document.getElementById("thebutton").innerHTML == "light"){
        document.getElementById("thebutton").innerHTML = "dark";
        document.getElementById("theframe").contentWindow.document.body.style.backgroundColor = "white";
    }
    else{
        document.getElementById("thebutton").innerHTML = "light";
        document.getElementById("theframe").contentWindow.document.body.style.backgroundColor = "black";
    }
    }
</script>

<button id="thebutton" type="button" onclick="change();">Dark</button>
<iframe id="theframe" src="" />

if you want to do this on two buttons just put code where it changes the frame into the button instead like.

<button id="thebutton" type="button" onclick="document.getElementById("theframe").contentWindow.document.body.style.backgroundColor = "black";">Dark</button>
<button id="thebutton" type="button" onclick="document.getElementById("theframe").contentWindow.document.body.style.backgroundColor = "white";">Light</button>
<iframe id="theframe" src="" />

hope this helps. if it answers the question put a check so other people can find it.

Chris
  • 82
  • 12
  • Essentially, My website has two buttons at the bottom that change the "theme" of the site from a dark colored theme to a light colored theme. The problem I'm having is that when i click on the dark theme the iframe remains in the white theme. I want to make it so that when i click on either of those two theme buttons, it switches the theme of the iframe as well. – NadaBlast Sep 17 '15 at 12:41
  • o then no problem at all and you were right javascript can do this. one sec and ill add another solution – Chris Sep 17 '15 at 13:22