Skip to content

feat: add support for iframes (options.insertInto) #248

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 8 commits into from
Jun 12, 2017
Merged

feat: add support for iframes (options.insertInto) #248

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
933085d
insertInto for iframes
Jun 6, 2017
e786fb9
fix unit test
Jun 6, 2017
685e503
fix typo
Jun 6, 2017
196641e
revert whitespace changes
Jun 6, 2017
f8a8582
convert space indent to tabs (like rest of document)
Jun 6, 2017
1b788f2
use try/catch only if element is a iframe
Jun 6, 2017
6b8dec5
Revert "convert space indent to tabs (like rest of document)"
Jun 6, 2017
b998280
readme improvement: use link for "IFrame"
Jun 12, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
14 changes: 12 additions & 2 deletions lib/addStyles.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand Down
12 changes: 12 additions & 0 deletions test/basicTest.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,7 @@ describe("basic tests", function() {
"<div class='target'>",
checkValue,
"</div>",
"<iframe class='iframeTarget'/>",
"</body>",
"</html>"
].join("\n");
Expand Down Expand Up @@ -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;
Expand Down