• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 366
  • Last Modified:

how to set the height of iframe to 100% of the content

hi i am going to give the oportunity to developers to use my page as resource for the bible. so they will add this script on their page:

<script type="text/javascript">
    quartelcristao_idb = "29";
    quartelcristao_idl = "692";
    quartelcristao_width = "950px";
</script>
<script src="http://www.quartelcristao.com/js/biblia/style01.js"></script>

but i want the iframe height to be 100% of the content. but not always is happening, don't know why. i try this on the style01.js file:

function QuartelCristao_Biblia_Resize_iframe() {
    var height = window.innerWidth; //Firefox
    if (document.body.clientHeight) {
       height = document.body.clientHeight; //IE
    }
    document.getElementById("QuartelCristao_Biblia_iframe").style.height = parseInt(height - document.getElementById("QuartelCristao_Biblia_iframe").offsetTop - 8) + "px";
}

window.onresize = QuartelCristao_Biblia_Resize_iframe;
 
(
function () {
   var url = "http://www.quartelcristao.com/js/biblia/style01/Default.aspx?";
    var current_location = window.location.hostname;
    url += "?" + "idb=" + quartelcristao_idb + "&idl=" + quartelcristao_idl;
    document.write("<iframe id='QuartelCristao_Biblia_iframe' width='" + quartelcristao_width + "' height='100%' frameborder=0 onLoad='QuartelCristao_Biblia_Resize_iframe()' src='" + url + "'></iframe>");
})()

Open in new window

0
rafaelrgl
Asked:
rafaelrgl
  • 3
  • 3
1 Solution
 
leakim971PluritechnicianCommented:
line 2, why innerWidth? var height = window.innerWidth; //Firefox

else check this : http://www.slackcoders.com/2008/03/10/iframe-dynamic-resizing-solved/
0
 
Michel PlungjanIT ExpertCommented:
Firefox also understands document.body.clientWidth now
0
 
rafaelrglAuthor Commented:
this was just an code that i get on the internet. so we don't need this one anymore innerwidth?

something is wrong with my code any guess? or any changes i should make?
0
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
rafaelrglAuthor Commented:
pls, if you have time help me
0
 
leakim971PluritechnicianCommented:
line 2, why innerWidth? var height = window.innerWidth; //Firefox

else check this : http://www.slackcoders.com/2008/03/10/iframe-dynamic-resizing-solved/
0
 
rafaelrglAuthor Commented:
Sorry leakim971,

but i already delete this line and still same problem. and i also already read and did everything what this link shows? i think there is something wrong with that code on that page. did u test it before u gave this link or you just read solved on the link and did think it's solved?

sorry. but the problem still going on.
0
 
leakim971PluritechnicianCommented:
don't delete it

var height = window.innerWidth; //Firefox

I see innerWidth and height, logically it should be var height = window.innerHeight;
no? It was just a thought

https://developer.mozilla.org/fr/DOM/window.innerHeight
0

Featured Post

Become an Android App Developer

Ready to kick start your career in 2018? Learn how to build an Android app in January’s Course of the Month and open the door to new opportunities.

  • 3
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now