Set scroll to an iframe dynamically in IE
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>
<f开发者_如何转开发orm 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...
we can change the innerHTML of the specific div or td (if we are using tables). I am using table and it is working well.
This is the HTML of the index page.
<body>
<table border="0">
<tr>
<td>
<button name="chk" id="chk" style="height: 50px; width:80px; cursor:pointer;" onclick="scrollme()">Click me</button>
</td>
<td id='test' style="border:1px solid">
<iframe frameborder=0 align=middle width=100% height=100% scrolling="no" src='linkframe.php' name='frm' id='frm' marginheight=0 marginwidth=0 ></iframe>
</td>
</tr>
</table>
<input type="hidden" id="tag" name="tag" value="0"/>
</body>
This is the javascript function in the index page.
<script type="text/javascript">
function scrollme()
{
if(document.getElementById('tag').value==0)
{
document.getElementById('test').innerHTML="<iframe frameborder=0 align=middle width=100% height=100% scrolling='yes' src='linkframe.php' name='frm' id='frm' marginheight=0 marginwidth=0 ></iframe>";
document.getElementById('tag').value=1;
}
else
{
document.getElementById('test').innerHTML="<iframe frameborder=0 align=middle width=100% height=100% scrolling='no' src='linkframe.php' name='frm' id='frm' marginheight=0 marginwidth=0 ></iframe>";
document.getElementById('tag').value=0;
}
}
</script>
in the iframe you can attach any page. As my page was very long I am not showing that here. I am using one hidden input to keep track on the innerhtml of the table cell (basically the iframe element).
<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 :-P
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.
加载中,请稍侯......
精彩评论