javascript 常用方法

1.iframe 父子窗口之间传递值和方法调用

iframe之间可以通过javascript来实现传递值和方法,直接上代码

parent.htm

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >

<head>

    <title>iframe之间传值与方法调用</title>



    <script src="JavaScript/JQuery/jquery-1.4.2.js" type="text/javascript"></script>

    <style type="text/css">

    body{

     font-size:9pt;

    }

    </style>

    <script type="text/javascript">

        function getSonValue() {

            var sontxtName = window.frames["sonframe"].document.getElementById("txtSonName");

            var parentName = document.getElementById("txtName");

            parentName.value = sontxtName.value;

        }

        function parentAlert() {

            alert("我来自父页面!");

        }

        function getSonAlert() {

            return window.frames["sonframe"].sonAlert();

        }

        function getSonValueJquery() {

         $("#txtName").val($("#txtSonName", window.frames["sonframe"].document).val());

        }

    </script>

</head>

<body>

<fieldset>

<legend>调用子页面值</legend>

<input type="button" value="点我" onclick="getSonValue()" />

<input type="button" value="点我(Jquery)" onclick="getSonValueJquery()" />

<input type="text" id="txtName"  name="txtName"/>

</fieldset>

<fieldset>

<legend>调用子页面方法</legend>

<input type="button" value="点我" onclick="getSonAlert()" />

</fieldset>

<fieldset>

<legend>子页面</legend>

<iframe name="sonframe" id="sonframe" src="Son.htm" height="500px" width="500px" frameborder=0></iframe>

</fieldset>



</body>

</html>

son.htm

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >

<head>

    <title></title>

    <script src="JavaScript/JQuery/jquery-1.4.2.js" type="text/javascript"></script>

    <script type="text/javascript">

        function getParentValue() {

            var parentName = window.parent.document.getElementById("txtName");

            var sonName = document.getElementById("txtSonName");

            sonName.value = parentName.value;

        }

        function getParentJqueryValue() {

            $("#txtSonName").val($("#txtName", window.parent.document).val());

        }

        function sonAlert() {

            alert("我来自子页面!");

        }

        function getParentAlert() {

            return window.parent.parentAlert();

        }

    </script>

</head>

<body>

<fieldset>

<legend>调用父页面值</legend>

<input type="button" value="点我" onclick="getParentValue()" />

<input type="button" value="点我(Jquery)" onclick="getParentJqueryValue()" />

<input type="text" id="txtSonName"  name="txtSonName"/>

</fieldset>

<fieldset>

<legend>调用父页面方法</legend>

<input type="button" value="点我" onclick="getParentAlert()" />

</fieldset>

</body>

</html>

你可能感兴趣的:(JavaScript)