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>

cdalto · Accepted Answer · 2019-04-25 14:39:22Z

4

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.

answered Apr 25, 2019 at 14:39

cdalto

8673 gold badges16 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

iframe not loading styles using srcdoc attribute

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related