4

My webpage has an embedded iFrame which is using a 3rd party tool within my webpage which means the URL from the iFrame is coming from a different location.

I need to detect the presentation of a scroll bar within the iFrame window when resizing the page, then carrying out a task once it has been detected.

I have tried a variety of different solutions all which have not been successful.

Is this possible?

Many Thanks!

Demetrios Yannikakis
  • 41
  • 1
  • 2
  • why dont you set the scrollbar=yes and resizable=yes in the iframe tag?, this makes the iframe display scrollbar on your iframe if content exceeds the normal view! – M Reza Saberi Apr 03 '13 at 11:09
  • Thanks for the input but it's not quite what I`m looking for. Am hoping to detect the scrollbar in the iFrame when the content exceeds the normal view. – Demetrios Yannikakis Apr 03 '13 at 11:17
  • You can not access any document loaded from a different domain in JavaScript – http://en.wikipedia.org/wiki/Same_origin_policy – CBroe Apr 03 '13 at 11:17
  • You mention you've tried a variety of different solutions? What are they so people don't just reply with the same thing. – TommyBs Apr 03 '13 at 11:53
  • Sure thing. Here is one of them. http://stackoverflow.com/questions/681087/how-can-i-detect-a-scrollbar-presence-using-javascript-in-html-iframe After further research I then came across this which made me think this may not be possible. http://stackoverflow.com/questions/4718688/javascript-detecting-scrollbars-in-a-cross-domain-iframe – Demetrios Yannikakis Apr 03 '13 at 12:39

2 Answers2

1

This is the first thing that comes to my mind: http://jsfiddle.net/matias/hhcKn/

just sample code!

HTML:

<div id="body"></div>

JS:

var $iframe = $("<iframe></iframe>").appendTo("#body");
var iframe = $iframe[0];
var doc = iframe.document;

//test this
var content = "<h1>Hello world</h1><br><p>more content!</p>";

//and then this
//var content = "<h1>Hello world</h1><br><br><br><br><br><p>more content!</p>";

if(iframe.contentDocument){
    doc = iframe.contentDocument;
}
else if(iframe.contentWindow){
    doc = iframe.contentWindow.document;
}
doc.open();
doc.writeln(content);
doc.close();


//this is the part that might interest you
var div_height = $("#body").height();
var iframe_height = $("iframe").contents().height();

if(iframe_height > div_height) alert("scrollbars present");

CSS:

body{
    border: 1px solid red;
}

iframe{
    border: none;
}
Matías Cánepa
  • 5,770
  • 4
  • 57
  • 97
1
<iframe src="111.html" id="iframeid" height="300" width="800"></iframe>

<script type="text/javascript">
function resizeIFrame(){
    $("#iframeid").attr("height", $("#iframeid").contents().height());
}
setInterval("resizeIFrame()", 500)
</script>
Ricky
  • 11
  • 2