zoukankan      html  css  js  c++  java
  • asp.net中iframe页面用jQuery向父页面传值

    在asp.net页面有时一个页面会通过iframe嵌套另一个页面,下面的例子讲述的是被嵌套的iframe页面向父页传值的一种方式,用jQuery即可。

    iframe页面代码:

    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <title>Iframe页面</title>
        <script src="Scripts/jquery-1.7.1.min.js"></script>
        <script type="text/javascript">
            $(function () {
                var iframeValue= $("#iframe_div").text();
                window.parent.IframeValue(iframeValue);
            });
        </script>
    </head>
    <body style="background:blue">
        <div id="iframe_div">
            This is iframe page!
        </div>
    </body>
    </html>

    父页面代码:

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>父页面</title>
        <script src="Scripts/jquery-1.7.1.min.js"></script>
        <script type="text/javascript">
            var val="";
    
            function IframeValue(iframeValue)
            {
                val= iframeValue;
            }
    
            function GetIframeValue() {
                alert(val);
            }
        </script>
    </head>
    <body>
        <div style="400px;height:280px;border:1px solid red;margin:0 auto;padding:10px 0 0 50px">
            <b>This is parent page!</b><br /><br />
            <input type="button" onclick="GetIframeValue()" value="传值" />
            <br /><br /><br />
            <iframe src="IframePage.html"></iframe>
        </div>
    </body>
    </html>

    父页面运行效果:

    点击按钮后的结果:

     可以看到iframe页面已经成功向父页传值。

    当然还有很多方法,这里只是很简单的方法,仅供参考,实际开发中会更复杂,希望可以抛砖引玉!

  • 相关阅读:
    Hello,world的几种写法!
    浮动与清除浮动
    css中表格的table-layout属性特殊用法
    CSS之照片集效果
    CSS之transition过渡练习
    CSS之过渡简单应用—日落西山
    CSS之立方体绘画步骤
    CSS之立体球体
    transform
    Vue.sync修饰符与this.$emit('update:xxx', newXXX)
  • 原文地址:https://www.cnblogs.com/qk2014/p/4523396.html
Copyright © 2011-2022 走看看