Question

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

以下是测试地址：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>

Answer 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>

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

1 个答案: