DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> js將iframe中控件的值傳到主頁面控件中的實現方法
js將iframe中控件的值傳到主頁面控件中的實現方法
編輯:關於JavaScript     

現在來看一下代碼的實現,首先來看一個主界面的代碼

復制代碼 代碼如下:
<html>
    <head>
        <script type="text/javascript">
            function GetData(data)
            {
                alert(data);
                document.getElementById("id1").value=data;
            }
        </script>
    </head>
<body>
    <div>
        <input id="id1" type="text" value="11" />
    </div>
    <div>
        <iframe id="frameid" src="b.html">
        </iframe>
    </div>
</body>
</html>

可以看到在主頁面定義一個JavaScript函數實現,將傳入的data參數,賦值給id為id1的input 文本控件。

下面來看一個嵌入的b.html頁面代碼

復制代碼 代碼如下:
<script type="text/javascript">
    function OnTest()
    {
        var data=document.getElementById("test").value;
        parent.GetData(data);
    }
</script>
<div>
    <input id="test" type="text" value="將此值傳到主頁面控件中" />
    <button onclick="OnTest()">test</button>
</div>

嵌入頁面中主要通過一個按鈕事件,將此頁面中一個input文本控件中的值取出,然後通過parent.GetData(data)調用主頁面的函數進行操作即可。

這是未點擊按鈕前的效果,現在點擊按鈕查看效果。

這樣就實現了傳值的效果

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved