Question

我有一种情况，我必须在组件加载时通过在运行时动态构建iframe来将内联js嵌入到iframe src中。

该示例在Chrome和Edge中均可正常运行，但在IE11中无法运行，可能是什么原因？ IE甚至没有抱怨，如果我们检查控制台日志，则不会打印任何内容，例如chrome，它将在控制台日志中打印我的名字。

注意-请在Chrome和IE中运行该应用，以查看两者之间的区别。

import { Component, OnInit, Renderer2, ElementRef } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit{
  name = 'Angular 6';


 constructor(private renderer : Renderer2, private elRef : ElementRef ){}


  ngOnInit(){
    const outerDiv = this.elRef.nativeElement.getElementsByTagName('div')[0];
    const el = this.renderer.createElement('iframe');
    let script =encodeURI(`data:text/html,<script>console.log('DONE');var execute = function(context){ console.log(context.data.name);}; window.addEventListener('message', function(msg){execute(msg);});</script>`);
    el.setAttribute('sandbox', 'allow-scripts');
    el.setAttribute('src', script);
    outerDiv.appendChild(el);
    el.onload = function() {
      el.contentWindow.postMessage({name: 'Rahul'}, "*");
  }
  }
}

<div></div>

Answer 1

由于IE中的安全原因，您不能将任何图像/ pdf或任何其他资产的base64数据提供给HTML对象。相反，您可以使用拥有资产的服务器的路径。

how to display base64 encoded pdf?

这是一个例子。

具有Iframe src的嵌入式js在Angular的IE11中不起作用

1 个答案: