如何获取Iframe的页面控件的值

有时候我们在页面需要使用iframe的方法来引用另一个页面，虽然个人建议不要使用iframe哈，但是有些时候是没得法了才使用的咯，那么在使用的过程中也会遇到某一些问题，我将自己遇到的问题记录下来方便以后的朋友在遇到了此问题少走弯路！！！

假如我首页index.hmtl使用了iframe引用了child.html页面代码如下：

<div>
    <div class="panel panel-default">

        <div>
            <div class="panel-body">
                <div class="form-group">
                    <label class="col-xs-12 col-sm-3 col-md-2 control-label">地理位置</label>
                    <div class="col-sm-9">
                    <div>
                        <iframe id="ifram1" name="jw_frame" frameborder="" width="" height=""  src="child.html" allowTransparency="true"  style="background-color=transparent"></iframe>
                    </div>
                        <button type="button" class="btn btn-success" onclick="hajw()">使用当前位置</button>
                        <div class="help-block" style="color:red;">注意：地图上选好了地点后上面的按钮必点，否则获取不到地理位置</div>
                        <input type="hidden" name="loca_lng" id="loca_lng" value="{$reply['lng']}">
                        <input type="hidden" name="loca_sp" id="loca_sp"  value="{$reply['sp']}">
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
获取child.html页面的值代码：
<script>
function hajw()
{
    var loca= $("#ifram1").contents().find("#lonlat").val();
　　alert(loca);
}
</script>

child.html

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
</head>
<body>
<form action="" method="get">
 值：
  <input id="lonlat" name="lonlat" type="text" readonly="readonly">
  </div>
</form>
获取index.html页面控件的值
<script type="text/javascript">
var lng=window.parent.document.getElementById("loca_lng").value;
var sp=window.parent.document.getElementById("loca_sp").value;
</script>