Javascript 角度：在iFrame中运行脚本_Javascript_Html_Angular_Iframe

Javascript 角度：在iFrame中运行脚本

javascript html angular iframe

Javascript 角度：在iFrame中运行脚本,javascript,html,angular,iframe,Javascript,Html,Angular,Iframe,我得到HTML作为字符串作为API响应。HTML包含很少的内部脚本标记，这些标记具有在$（window）.load（）下调用的函数。如何在我的angular应用程序中加载此HTML 我尝试将HTML字符串响应附加到iFrame主体。HTML加载，但脚本标记不会作为window执行。角度路由更改时不会触发load事件我如何处理这个问题。这是我的密码：组件技术 ngOnInit() { const html = " <html> <bod

我得到HTML作为字符串作为API响应。HTML包含很少的内部脚本标记，这些标记具有在$（window）.load（）下调用的函数。如何在我的angular应用程序中加载此HTML

我尝试将HTML字符串响应附加到iFrame主体。HTML加载，但脚本标记不会作为window执行。角度路由更改时不会触发load事件

我如何处理这个问题。这是我的密码：

组件技术

ngOnInit() {
   const html = "
       <html>
         <body>
             <h1>Hello world</h1>
             <script>
               $(window).on('load', function() {
                 console.log('I am in the function') 
               })
             </script>
         </body>
      </html>"
   this.iframeDoc = this.iframe.nativeElement.contentDocument
   this.iframeDoc.body.innerHTML = html;
}

ngOnInit() {
   const html = "
       <html>
         <body>
             <h1>Hello world</h1>
             <script>
               $(window).on('load', function() {
                 console.log('I am in the function') 
               })
             </script>
         </body>
      </html>"
   const wrapper = document.getElementById('wrapper');
   wrapper.innerHTML = html;
}

ngOnInit（）{
常量html=”
你好，世界
$（窗口）.on（'load'，function（）{
log（'我在函数中'）
})
"
this.iframeDoc=this.iframe.nativeElement.contentDocument
this.iframeDoc.body.innerHTML=html；
}

component.html

<iframe #iframe></iframe>

<div id="wrapper" appRunScripts></div>

我希望在添加iframe内容时记录“我在函数中”

编辑：

我还尝试将HTML附加到div而不是iFrame。代码如下：

component.html

<iframe #iframe></iframe>

<div id="wrapper" appRunScripts></div>

组件技术

ngOnInit() {
   const html = "
       <html>
         <body>
             <h1>Hello world</h1>
             <script>
               $(window).on('load', function() {
                 console.log('I am in the function') 
               })
             </script>
         </body>
      </html>"
   this.iframeDoc = this.iframe.nativeElement.contentDocument
   this.iframeDoc.body.innerHTML = html;
}

ngOnInit() {
   const html = "
       <html>
         <body>
             <h1>Hello world</h1>
             <script>
               $(window).on('load', function() {
                 console.log('I am in the function') 
               })
             </script>
         </body>
      </html>"
   const wrapper = document.getElementById('wrapper');
   wrapper.innerHTML = html;
}

ngOnInit（）{
常量html=”
你好，世界
$（窗口）.on（'load'，function（）{
log（'我在函数中'）
})
"
const wrapper=document.getElementById（'wrapper'）；
wrapper.innerHTML=html；
}

还添加了在HTML中运行脚本的指令。这是我的建议 run-scripts.directive.ts

import { Directive, ElementRef, OnInit  } from '@angular/core';

@Directive({
  selector: '[appRunScripts]' 
})
export class RunScriptsDirective implements OnInit {

  constructor(private elementRef: ElementRef) { }
  ngOnInit(): void {
      setTimeout(() => { // wait for DOM rendering
          this.reinsertScripts();
      });
  }
  reinsertScripts(): void {
      const scripts = <HTMLScriptElement[]>this.elementRef.nativeElement.getElementsByTagName('script');
      const scriptsInitialLength = scripts.length;
      for (let i = 0; i < scriptsInitialLength; i++) {
          const script = scripts[i];
          const scriptCopy = <HTMLScriptElement>document.createElement('script');
          scriptCopy.type = script.type ? script.type : 'text/javascript';
          if (script.innerHTML) {
              scriptCopy.innerHTML = script.innerHTML;
          } else if (script.src) {
              scriptCopy.src = script.src;
          }
          scriptCopy.async = false;
          script.parentNode.replaceChild(scriptCopy, script);
      }
  }

}

从'@angular/core'导入{指令，ElementRef，OnInit}；
@指示({
选择器：“[appRunScripts]”
})
导出类RunScriptsDirective实现OnInit{
构造函数（私有elementRef:elementRef）{}
ngOnInit（）：void{
setTimeout（（）=>{//等待DOM呈现
此参数为.reinsertScripts（）；
});
}
重新插入脚本（）：void{
const scripts=this.elementRef.nativeElement.getElementsByTagName（'script'）；
const scriptsInitialLength=scripts.length；
for（设i=0；i


模板：
<div #content [innerHTML]="script"> </div>




模板：
<div #content [innerHTML]="script"> </div>



确保在使用$（窗口）后包含JQuery。@sajankumarvijayan是的，我已经这样做了。代码运行时没有错误。但只是脚本没有执行。请确保在使用$（window）后包含JQuery。@sajankumarvijayan是的，我已经这样做了。代码运行时没有错误。但是只是没有执行脚本。我如何使用div而不是iframe实现相同的用例？检查EDIT@chiragshah，更新了答案，但我现在无法访问jQuery
。我如何使用div而不是iframe实现相同的用例？检查EDIT@chiragshah，更新了答案，但我现在无法访问jQuery
。