CODEWITHSUNDEEP
javascripthtmliframe
StudentIT
StudentIT

Reputation: 481

Why iframe font size doesn't change at all?

I want to change iframe font size into 150%. I already set up in css then the result doesn't change which is still same small text. Why it doesn't change the size?

Here my css codes,

#frame{
font-size:150%;
}

.frame {
z-index:2000;
}

and then my html code,

<div class="frame">
    <iframe id ="frame" srcdoc="<p></p>" width="930"></iframe>
</div>

Then a javascript code that print texts in iframe,

document.getElementById("frame").srcdoc += transcript;

Upvotes: 0

Views: 5174

Answers (2)

Leandri
Leandri

Reputation: 125

function changeSize(){
    var frame = document.getElementById("frame");
    var content = (frame.contentDocument || frame.contentWindow);
    content.body.style.fontSize = "150%";
}

try calling this function after you have added the text to your iFrame like so

document.getElementById("frame").srcdoc += transcript;
changeSize();

Upvotes: 2

Derek Henderson
Derek Henderson

Reputation: 9706

CSS in the parent page won't affect anything inside the iframe. In fact the iframe is almost entirely boxed off from the code on the page where it appears.

Upvotes: 1

Related Questions