Question

我在我的应用中使用了iframe。外部网址有一个页眉/页脚我想隐藏。下面是我到目前为止，我已经尝试了许多不同的变体，但没有运气使用元素。删除和＃34;页面页脚＆＃34;。

HTML

`  <iframe #iframe id="tcsFrame" [src]="<external_url_here>" 
    scrolling="no"
    frameBorder="0" 
    width="100%" 
    height="32000px" 
    type='text/html'"></iframe>
`

角度组件

`
import { Component, OnInit, ViewChild, ElementRef, AfterViewInit } from '@angular/core';
import { DomSanitizer, BrowserModule } from '@angular/platform-browser';

@Component({
  selector: 'my-page-conditions',
  templateUrl: './my-page.component.html',
  styleUrls: ['./my-page.component.css']
})
export class TermsConditionsComponent implements OnInit, AfterViewInit {

  @ViewChild('iframe') iframe: ElementRef;

  constructor(private domSanitizer: DomSanitizer) {
  }

  ngOnInit() {
  }

  ngAfterViewInit() {
    let doc =  this.iframe.nativeElement.contentDocument || this.iframe.nativeElement.contentWindow;

doc.document.getElementsByClassName('page-footer').style.visibility = 'none';
doc.document.getElementsByClassName('page-footer').style.diplays = 'none';


  }

}

`

任何提示都会非常感激！

Answer 1

所以，我给你的答案，但你最好想一想，如果这是更好的方法。我假设您在iframe中维护页面，最好将一些参数传递给url，而不是首先显示标题。

  ngOnInit() {
    const self = this;
    this.iframe.nativeElement.onload = function () {
      const els = self.iframe.nativeElement.contentDocument.getElementsByClassName('header');
      if (els.length > 0) {
        els[0].style.display = 'none';
      }
    };
  }

Angular 5 iframe隐藏页眉和页脚

1 个答案: