Question

I have an iframe. I am setting the content of the iframe (different domain – like http://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 Dreaded iframe horizontal scroll bar can't 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 😛