iframe not loading styles using srcdoc attribute

Question

I am using an iframe in an Angular component, and while using the src attribute to load a site loads, the styles and content perfectly fine. When trying to load static html in as a string with the srcdoc attribute, only the HTML appears to be rendering. The following is a very basic example that I've reduced this to that still isn't loading the styles.

import {
  Component,
  OnInit,
  ViewEncapsulation
} from '@angular/core';

@Component({
  selector: 'app-newsletter-viewer',
  templateUrl: './newsletter-viewer.component.html',
  styleUrls: ['./newsletter-viewer.component.scss'],
  encapsulation: ViewEncapsulation.ShadowDom
})
export class NewsletterViewerComponent implements OnInit {
  newsletterSrcDoc: string;
  constructor() {}

  ngOnInit() {
    this.newsletterSrcDoc = `
    <!DOCTYPE html>
    <html>
      <head>
        <title></title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" />
    <style>
    p {
    color: red;
    font-size: 2em;
    }
    </style>
      </head>
      <body>
        <div class="page">
        <div id="template2">
        <div class="section-cover-photo">
        <div class="col">
        <div class="container">
          <img src="" class="cover-photo">
        <div class="banner-template2">
          <h1>Test Title</h1>
          <p>This is a test document.</p>
        </div>
        </div>
        </div>
        </div>
        </div>
        </div>
      </body>
    </html>
    `;
  }

}

.wrap {
  width: 170px;
  height: 220px;
  padding: 0;
  overflow: hidden;
}

.frame {
  width: 8.5in;
  height: 11in;
  border: 0;
  -ms-transform: scale(0.25);
  -moz-transform: scale(0.25);
  -o-transform: scale(0.25);
  -webkit-transform: scale(0.25);
  transform: scale(0.25);
  -ms-transform-origin: 0 0;
  -moz-transform-origin: 0 0;
  -o-transform-origin: 0 0;
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
}

<div class="wrap">
  <iframe class="frame" [srcdoc]="newsletterSrcDoc"></iframe>
</div>

score 4 · Answer 1 · answered Apr 25 '19 at 14:39

After taking a different approach in searching for related topics on Stack Overflow, the accepted answer on this topic seemed to work for me: iframe inside angular2 component, Property 'contentWindow' does not exist on type 'HTMLElement'

From what I can tell, the issue has to do with how/when Angular chooses to render the DOM in the iframe. If the iframe's document content is rendered after the View (specifically the iframe in the View) is initialized, then the iframe's <head> tag is no longer omitted from the complete DOM structure on the web page.

iframe not loading styles using srcdoc attribute

1 Answers1