alex/yomichan
1
Fork 0
Code Releases Activity

support iframes inside open shadow dom

Browse Source
This commit is contained in:
siikamiika 2020-04-18 00:33:49 +03:00
parent 4fdc300b61
commit fbaf50def1
2 changed files with 39 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
ext/fg/js/frame-offset-forwarder.js
View File

@ -79,10 +79,29 @@ class FrameOffsetForwarder {
sourceFrame = frame;
break;
}
if (sourceFrame === null) {
const getShadowRootElements = (documentOrElement) => {
const elements = Array.from(documentOrElement.querySelectorAll('*'))
.filter((el) => !!el.shadowRoot);
const childElements = elements
.map((el) => el.shadowRoot)
.map(getShadowRootElements);
elements.push(childElements.flat());
return elements.flat();
};
sourceFrame = getShadowRootElements(document)
.map((el) => Array.from(el.shadowRoot.querySelectorAll('frame, iframe:not(.yomichan-float)')))
.flat()
.find((el) => el.contentWindow === e.source);
if (!sourceFrame) {
this._forwardFrameOffsetOrigin(null, uniqueId);
return;
}
}
const [forwardedX, forwardedY] = offset;
const {x, y} = sourceFrame.getBoundingClientRect();

17
test/data/html/test-document2.html
View File

@ -77,5 +77,22 @@ document.querySelector('#fullscreen-link1').addEventListener('click', () => togg
</script>
</div>
<div class="test">
<div class="description">&lt;iframe&gt; element inside of an open shadow DOM.</div>
<div id="shadow-iframe-container-open"></div>
<template id="shadow-iframe-container-open-content-template">
<iframe src="test-document2-frame1.html" allowfullscreen="true" style="width: 100%; height: 200px; border: 1px solid #d8d8d8;"></iframe>
</template>
<script>
(() => {
const shadowIframeContainer = document.querySelector('#shadow-iframe-container-open');
const shadow = shadowIframeContainer.attachShadow({mode: 'open'});
const template = document.querySelector('#shadow-iframe-container-open-content-template').content;
const content = document.importNode(template, true);
shadow.appendChild(content);
})();
</script>
</div>
</body>
</html>