I am using an iframe in an Angular ponent, 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-viewerponent.html',
styleUrls: ['./newsletter-viewerponent.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=".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>I am using an iframe in an Angular ponent, 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.ponent.html',
styleUrls: ['./newsletter-viewer.ponent.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./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>1 Answer
Reset to default 4After 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 ponent, 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 plete DOM structure on the web page.