有時候我們在頁面需要使用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="0" width="650" height="420" 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>