From 25e8e89b1f9c434162627ca3c2750d1796f58c1d Mon Sep 17 00:00:00 2001
From: Tobias Zucali <tzuc@usersnap.com>
Date: Mon, 12 Jun 2017 14:10:26 +0200
Subject: [PATCH] feat: add support for iframes (`options.insertInto`) (#248)

---
 README.md         |  3 ++-
 lib/addStyles.js  | 14 ++++++++++++--
 test/basicTest.js | 12 ++++++++++++
 3 files changed, 26 insertions(+), 3 deletions(-)
diff --git a/README.md b/README.md
index 506d90be..ca24ed6f 100644
--- a/README.md
+++ b/README.md
@@ -286,7 +286,8 @@ By default, the style-loader appends `<style>` elements to the end of the style
 ```
 
 ### `insertInto`
-By default, the style-loader inserts the `<style>` elements into the `<head>` tag of the page. If you want the tags to be inserted somewhere else, e.g. into a [ShadowRoot](https://developer.mozilla.org/en-US/docs/Web/API/ShadowRoot), you can specify a CSS selector for that element here, e.g
+By default, the style-loader inserts the `<style>` elements into the `<head>` tag of the page. If you want the tags to be inserted somewhere else you can specify a CSS selector for that element here. If you target an [IFrame](https://developer.mozilla.org/en-US/docs/Web/API/HTMLIFrameElement) make sure you have sufficient access rights, the styles will be injected into the content document head.
+You can also insert the styles into a [ShadowRoot](https://developer.mozilla.org/en-US/docs/Web/API/ShadowRoot), e.g
 
 **webpack.config.js**
 ```js
diff --git a/lib/addStyles.js b/lib/addStyles.js
index 8ee709ed..023ad96b 100644
--- a/lib/addStyles.js
+++ b/lib/addStyles.js
@@ -28,9 +28,19 @@ var getElement = (function (fn) {
 
 	return function(selector) {
 		if (typeof memo[selector] === "undefined") {
-			memo[selector] = fn.call(this, selector);
+			var styleTarget = fn.call(this, selector);
+			// Special case to return head of iframe instead of iframe itself
+			if (styleTarget instanceof window.HTMLIFrameElement) {
+				try {
+					// This will throw an exception if access to iframe is blocked
+					// due to cross-origin restrictions
+					styleTarget = styleTarget.contentDocument.head;
+				} catch(e) {
+					styleTarget = null;
+				}
+			}
+			memo[selector] = styleTarget;
 		}
-
 		return memo[selector]
 	};
 })(function (target) {
diff --git a/test/basicTest.js b/test/basicTest.js
index 70f9b7d2..fc047bc7 100644
--- a/test/basicTest.js
+++ b/test/basicTest.js
@@ -31,6 +31,7 @@ describe("basic tests", function() {
       "<div class='target'>",
       checkValue,
       "</div>",
+      "<iframe class='iframeTarget'/>",
       "</body>",
       "</html>"
     ].join("\n");
@@ -103,6 +104,17 @@ describe("basic tests", function() {
     runCompilerTest(expected, done, undefined, selector);
   }); // it insert into
 
+  it("insert into iframe", function(done) {
+    let selector = "iframe.iframeTarget";
+    styleLoaderOptions.insertInto = selector;
+
+    let expected = requiredStyle;
+
+    runCompilerTest(expected, done, function() {
+      return this.document.querySelector(selector).contentDocument.head.innerHTML;
+    }, selector);
+  }); // it insert into
+
   it("singleton", function(done) {
     // Setup
     styleLoaderOptions.singleton = true;
