How to change the color of a frame

<textarea name="" id="tx" cols="40" rows="10">
  <u>Раз</u>,Два три, четыре, <i>пять</i>,<br>Вышел <b>зайчик</b>
  погулять
</textarea><br>
<iframe  id="fr" name="fr"></iframe>
frames['fr'].document.designMode='on'

document.getElementById('tx').addEventListener('select',function(){
  let v = document.getElementById('tx').value
  let st=document.getElementById('tx').selectionStart
  let en=document.getElementById('tx').selectionEnd

  frames['fr'].document.body.innerHTML=v.substring(st, en)


})


function fo(){
  document.getElementById('fr').style.color='red'
}

I wanted to change the color but it doesn’t change, I did different options but it’s not possible to understand the Javascript, it may work today but not tomorrow)))

Js is not my thing but a quick ten second search suggests that you need to change the elements in the iframe and not the iframe as nothing is inherited from that element. Its the content in the iframe that needs to be targetted.

e.g. Assuming you call that ‘fo’ function somewhere as I don’t see it being called then this will work.

document.getElementById("fr").contentWindow.document.body.style.color = "red";

However, you are probably better off waiting until someone who knows what they are talking about arrives.

Of course, it’s impossible to come up with something like this, contentWindow.document.body, why write so much incomprehensible stuff? Why doesn’t this work like document.getElementById(“fr”).style.color = “red”;? After all, it is clear that the call is going to a specific ID, but here again confusion arises

An iframe basically contains a separate document isolated from your main page and in that separate document you may have any content that could have conflicting ids to your host page. If in the iframe there was an element also called “fr” then how could you access it. You need to have a point of reference to the content in the iframe page which is supplied by ‘contentWindow’. You could then access any ids in that content window without being caught out by similar ids in the host page.

The iframe itself has no color value applied to it as its merely a container for the external document. The iframe element is an inline frame. It’s the content inside that frame that needs to be accessed. You can’t change the code on another page by simply changing a value of the iframe itself.

It’s more or less common sense to me anyway.

2 Likes

Because one of the main points of an <iframe> is that it’s content is isolated from the primary document. That means styles and scripts in the primary document don’t affect the iframe document, and likewise styles and scripts in the iframe document don’t affect the primary document.

Reading the MDN page about iframe’s, specifically the scripting section tells you how to interact with the iframe content, if permitted. Reading it would have introduced you to contentWindow and linked you to further documentation on the topic.

Any time you’re dealing with a new element or JavaScript function/object, it’s a good idea to do a quick search for mdn theThing and read the information on MDN about it.

2 Likes

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.