访问iFrame中的表单

时间:2014-01-10 21:59:56

标签: javascript forms dom iframe

我正在尝试在iFrame中加载表单然后使用JavaScript登录它,两个for循环用于选择登录字段。我在访问DOM树中的表单元素时遇到了什么问题。 var form = doc.forms[0];行没有给我任何问题,但当我尝试使用form.action这样的函数时,它会说Uncaught TypeError: Cannot set property 'action' of undefined。我做错了什么?

<HTML>
    <head>
    </head>
        <body> 
        <iframe height="300px" id="carrierPage" name="carrierPage" src="" width="100%"></iframe>
            <script type="text/javascript">
            function autoLogin(username, password, url){
                var iframe = document.getElementById("carrierPage");;
                iframe.src = url;
                var doc = iframe.contentWindow.document;
                var form = doc.forms[0];
                form.action = url;
                form.target = "carrierPage";
                for(var i = 0; i < form.length; i++)
                    if(form.elements[i].type == "text"){
                        form.elements[i].value = username;
                        i = form.length + 1;
                    }
                for(var i = 0; i < form.length; i++)
                    if(form.elements[i].type == "password"){
                        form.elements[i].value = password;
                        i = form.length + 1;
                    } 
                form.submit();  */  
            }

            autoLogin("someUserName", "somePassword", "https://someURL.com/login");         
            </script>
        </body>
    </HTML>

1 个答案:

答案 0 :(得分:0)

虽然您在引用doc.forms[0]时没有任何问题,doc.forms[0]仍然可能是undefined。在引用iframe中的元素之前,您必须等到新页面的内容已加载到iframe。你可以这样做:

function autoLogin(username, password, url){
    var iframe = document.getElementById('carrierPage');
    iframe.addEventListener('load', function () {
        var doc = iframe.contentWindow.document;
        var form = doc.forms[0];
            ...
        form.submit();
    });
    iframe.src = url;
}