zoukankan      html  css  js  c++  java
  • 如何获取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="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>
  • 相关阅读:
    修改css样式+jq中的效果+属性操作+元素操作
    案例1:点击菜单显示相应的图片
    jq容易混淆点
    jQuery中的选择器
    JQ基本
    arguments的使用
    函数方法
    forEach遍历
    数组中常用的方法
    数组 Array
  • 原文地址:https://www.cnblogs.com/LoveQin/p/5227679.html
Copyright © 2011-2022 走看看