Set scroll to an iframe dynamically in IE

Question

I have an iframe. I am setting the content of the iframe (different domain - like www.google.com) through a form submission.Currently it's scrolling attribute is set to 'no'.

<iframe name="testFrame" id="testFrame" frameborder="1" scrolling="no" width="500" height="200"></iframe>
<form name="testForm" id="testForm" action="http://www.google.com" target="testFrame"></form>
<button name="testBtn" value="submit" onclick="submitForm();">submit</button>

I want to put scroll to this iframe dynamically.

$("#testFrame").attr('scrolling','yes');

This is working in Firefox but not in IE. Also tried with:

document.getElementById("testFrame").style.overflow="scroll";

No luck...:( Help me please...

Answer 1

<iframe src="address" id="IFrame" frameborder=0 horizontalscrolling="no" verticalscrolling="yes"></iframe>

is what I use in my web apps - you need to use the horizontalscrolling/verticalscrolling properties separate to the CSS in IE.

See also http://stackoverflow.com/questions/67354/dreaded-iframe-horizontal-scroll-bar-cant-be-removed-in-ie

I'm not sure how to do this in JQuery etc though.

EDIT:

I think it might need to be created from innerHTML - using document.createElement('IFrame') which JQuery might use didn't work if I recall correctly - I think that changing these properties may not work once the elements are created.

Try creating a container DIV using JQuery or in HTML with an ID, and call something like:

var div = $('#MyDivID')
div.html('<iframe src="about:blank" frameborder=0 horizontalscrolling="no" verticalscrolling="yes"></iframe>')
var ifr = div.children(":first-child") // Get the IFrame created using innerHTML
ifr.src = 'ADDRESS'

I really don't know whether that'll work though, I haven't used JQuery before, so I'm just going on the JQuery docs :-P

Answer 2

I tried to replicate the scenario in my local machine and I observed that presence of IFrame element effects jQuery code execution.On page load I tried to throw an alert :-

$(document).ready(function() {
            alert("hello");            
        });

But even this simple piece of code is not wokring in IE. And once I commented IFrame portion , the above code executed normally.I tried other jQuery operations on elements like div etc and they all worked smoothly.

Is it just my observation or others too have experienced this before.