Disclaimer
I struggled to find the answer yesterday, so I thought I'd post the answer here for everyone.
How can I access the content of an iframe with jQuery? I tried doing this, but it wouldn't work:
iframe content: <div id="myContent"></div>
jQuery: $("#myiframe").find("#myContent")
How can access myContent?
Similar to jquery/javascript: accessing contents of an iframe but the accepted answer is not what I was looking for.
You have to use the contents() method:
$("#myiframe").contents().find("#myContent")
Source: http://simple.procoding.net/2008/03/21/how-to-access-iframe-in-jquery/
<html>
<head>
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>
<script type="text/javascript">
$(function() {
//here you have the control over the body of the iframe document
var iBody = $("#iView").contents().find("body");
//here you have the control over any element (#myContent)
var myContent = iBody.find("#myContent");
});
</script>
</head>
<body>
<iframe src="mifile.html" id="iView" style="width:200px;height:70px;border:dotted 1px red" frameborder="0"></iframe>
</body>
</html>