干货 | 基于Angular开发语言下 Iframe 父子页面交互

作者简介

周小辉是一名高级软件工程师,从事Java和Web程序开发,近期项目是基于Angular框架开发的web项目,今天他为大家带来项目开发中碰到的难点,该问题是Angular框架下实现动态加载架构的有效方案,希望对大家有所启发。


有这样一个需求,存在父子页面,子页面有个输入框,父页面有个提交按钮,点击提交按钮,触发子页面的输入框参数校验,如果校验失败,则显示提示信息。iframe子页面与父页面通信根据iframe中src属性是同域链接还是跨域链接,通信方式也不同。这里主要描述重点是基于Angular开发语言的交互,因此以同域链接场景为例。

我们知道同域链接场景父页面调用子页面方法: 

FrameName.window.childMethod();

当获得子iframe窗口的window对象时就可以交互,子页面在基于传统的js框架,如jquery实现的话,会是下面这样

function childMethod(){

   var number=    $('#number').value();

   if(number=='' || number.length>10){

   alert('号码范围为1-10位数字');

   }

 }

   jquery是基于dom开发的,但是在angular下,我们不直接操作dom,我们一般定义一个ngModel绑定到页面上,通过ngModel来获取值,这时,实现就无从下手了,好在Angular1.0提供了api,而Angular2.0没有开放任何接口

  Angular1.0

index.html中实现childMethod

function childMethod(){

var controllerScope = $('html[ng-controller="MainCtrl"]').scope(); 

controllerScope.check();

}

//相应的controller实现一个check方法,并声明为rootscope方法就行了

app.controller('MainCtrl', function($scope, $rootScope) {


});

app.controller('ChildCtrl', function($scope, $rootScope) {

   $scope.number = '';

   $rootScope.check = function() {

      if(number=='' || number.length>10){

      alert('号码范围为1-10位数字');

   }

});


 Angular2.0

index.html中实现childMethod

function childMethod(){

var component =  window['child'];

component .check();

}


组件实现check方法

export class ChildComponent implements OnInit {

    number:string;

    constructor(public changedDetector: ChangeDetectorRef, public translate: TranslateService) {

        window['child'] = this;

    }

    check(){

      if(number=='' || number.length>10){

      alert('号码范围为1-10位数字');

  

      this.changedDetector.markForCheck();    //解决变量修改失效问题

      this.changedDetector.detectChanges();

     }  

    }

可以看到,我们在ChildCompent的构造方法中,给window扩展了一个child属性,然后在子页面的index.html可以通过这个属性访问到该组件,是一个比较讨巧的用法;但是这样直接使用会有问题,当我们在ChildComponent 组件的check方法中操作原生的js语法时不会有问题,但是当我们需要修改某个ngModel的值时,会发现失效了,原因是我们通过 window['child'].check()时,浏览器没有监听到事件变化,因而没有重新渲染ChildComponent,我的理解是一般事件都是监听鼠标触发的,此时没有产生鼠标事件,自然监听不到;解决方案就是手动通知组件重新渲染,代码就是ChangeDetectorRef提供的markForCheck,detectChanges方法



原文发布时间:2018年04月18日 13:00:45

原文作者:周小辉

本文来源CSDN,如需转载请联系原作者

上一篇:便宜购买阿里云服务器那些事,5大细节助你进一步降低购买成本


下一篇:更快学习 JS 的 6 个简单思维技巧