如何在 iframe 中传递输入空验证答案

【问题标题】：How to pass input empty validation in iframe如何在 iframe 中传递输入空验证
【发布时间】：2017-01-07 11:53:34
【问题描述】：

我模拟了按键事件并绑定到输入元素，但登录按钮仍然无法使用。

这里是测试地址：http://124.207.226.122:21701/test.html。

我的问题是如何在 iframe 中传递输入空验证。

谢谢。

父页面：

<body>
    <div style="margin:0;">
        <iframe id="hk_iframe" src="Ng-Click-1.html" frameborder="0" width="100%" Height="768" scrolling="no">do not support iframe</iframe>
    </div>

    <script type="text/javascript">
        jQuery.fn.simulateKeyPress = function(character) {  
            jQuery(this).trigger({ type: 'keypress', which: character.charCodeAt(0) });  
        };  

        $(function() {
            $('#hk_iframe').load(function(){    
                var $iframe = $(this), 
                $contents = $iframe.contents(); 
                window.setTimeout(function(){
                    $contents.find('#textbox').keypress( function(e) {  
                        //alert( String.fromCharCode( e.which ) );  
                        console.log(e);  
                    });  
                    $contents.find('#textbox').simulateKeyPress('x');           
                    $contents.find('#textbox').val('user1');

                    $contents.find('#password').keypress( function(e) {  
                        //alert( String.fromCharCode( e.which ) );  
                        console.log(e);  
                    });  
                    $contents.find('#password').simulateKeyPress('x');          
                    $contents.find('#password').val('user123456');

                    $contents.find('#login').click();
                }, 1000);
            });
        });
    </script>
</body>

子页面：

<body ng-app="">
    <form name="form">
        <div ng-hide="isShow">
            User Name  <input type="text" required ng-model="userName" id = "textbox"/><br /><br />
            Password <input type="password" required ng-model="password" id="password"/><br /><br />
            <input type="button" ng-disabled="form.$invalid" ng-click="isShow = true" value="Login" id="login"/>
        </div>
        <div ng-show="isShow">
            Successfully Login.<br />
            <input type="button" ng-click="isShow = false;password='';userName=''" value="Logout" />
        </div>
    </form>
</body>

【问题讨论】：

您永远不会验证您的表单。请查看文档：docs.angularjs.org/api/ng/directive/form

标签： javascript jquery html angularjs iframe

【解决方案1】：

谢谢迈克尔沃尔特，你是对的。另外，我参考了这个答案： Angularjs: call other scope which in iframe

这是我的答案：

父页面：

<body>
    <div style="margin:0;">
        <iframe id="hk_iframe" src="Ng-Click-1.html" frameborder="0" width="100%" Height="768" scrolling="no">do not support iframe</iframe>
    </div>

    <script type="text/javascript">
        $(function() {
            $('#hk_iframe').load(function(){    
                var $iframe = $(this), 
                $contents = $iframe.contents(); 
                window.setTimeout(function(){                   
                    $contents.find('#textbox').val('user1');    
                    $contents.find('#password').val('user123456');

                    var $scope = document.getElementById("hk_iframe").contentWindow.angular.element("#formID").scope();
                    $scope.form.textbox.$setValidity('required', true);
                    $scope.form.password.$setValidity('required', true);
                    $scope.$apply();

                    $contents.find('#login').click();
                }, 1000);
            });
        });
    </script>
</body>

【讨论】：