Skip to content
Snippets Groups Projects
Verified Commit 0e23cb22 authored by Volker Schukai's avatar Volker Schukai :alien:
Browse files

feat: new iframe feature for replace target

parent 21e832dc
No related branches found
No related tags found
No related merge requests found
Show whitespace changes
Inline Side-by-side
development/issues/closed/243-test2.html
+ 19
− 5
View file @ 0e23cb22
...@@ -18,8 +18,22 @@ ...@@ -18,8 +18,22 @@
main { main {
width: 200px; width: 200px;
height: 1200px; height: 1200px;
background-color: #bc05a9; background-color: #ede5eb;
} }
</style> </style>
</head><body><main>TEST 2</main></body></html> </head>
<body>
<main>TEST 2
<ul>
<li><a href="./243-test1.html" target="_blank">Doc 1 (_blank)</a>
<li><a href="./243-test1.html" target="_self">Doc 1 (_self)</a>
<li><a href="./243-test1.html" target="_parent">Doc 1 (_parent)</a>
<li><a href="./243-test1.html" target="_top">Doc 1 (_top)</a>
<li><a href="./243-test1.html" target="iframe">Doc 1 (iframe)</a>
</ul>
</main>
</body>
</html>
source/components/layout/iframe.mjs
+ 260
− 241
View file @ 0e23cb22
...@@ -119,6 +119,12 @@ class Iframe extends CustomElement { ...@@ -119,6 +119,12 @@ class Iframe extends CustomElement {
* @property {Object} actions Callbacks * @property {Object} actions Callbacks
* @property {string} actions.click="throw Error" Callback when clicked * @property {string} actions.click="throw Error" Callback when clicked
* @property {Object} features Features * @property {Object} features Features
* @property {boolean} features.allowFullScreen=true Allow fullscreen
* @property {boolean} features.allowPaymentRequest=true Allow payment request
* @property {boolean} features.replaceTargets=true Replace parent target in iframe
* @property {string} loading="eager" Loading state
* @property {string} referrerPolicy="no-referrer" Referrer policy
* @property {string} src Source
* @property {Object} classes CSS classes * @property {Object} classes CSS classes
* @property {boolean} disabled=false Disabled state * @property {boolean} disabled=false Disabled state
*/ */
...@@ -137,14 +143,17 @@ class Iframe extends CustomElement { ...@@ -137,14 +143,17 @@ class Iframe extends CustomElement {
name: "", name: "",
referrerpolicy: "no-referrer", referrerPolicy: "no-referrer",
disabled: false, disabled: false,
features: { features: {
allowfullscreen: true, allowFullScreen: true,
allowpaymentrequest: true, allowPaymentRequest: true,
loading: "egager", replaceTargets: true,
}, },
loading: "eager",
actions: { actions: {
click: () => { click: () => {
throw new Error("the click action is not defined"); throw new Error("the click action is not defined");
...@@ -309,6 +318,16 @@ function initEventHandler() { ...@@ -309,6 +318,16 @@ function initEventHandler() {
callback.call(self, event); callback.call(self, event);
}); });
this[iframeElementSymbol].addEventListener("load", () => {
calcHeight.call(this);
if (this.getOption("features.replaceParentTarget")) {
var links = this[iframeElementSymbol].contentDocument.querySelectorAll('a[target="_parent"], form[target="_parent"], a[target="_top"], form[target="_top"]');
links.forEach(function(link) {
link.target = '_self';
});
}
});
return this; return this;
} }
...@@ -341,10 +360,10 @@ function getTemplate() { ...@@ -341,10 +360,10 @@ function getTemplate() {
<iframe data-monster-role="iframe" <iframe data-monster-role="iframe"
data-monster-attributes="sandbox path:sandbox, data-monster-attributes="sandbox path:sandbox,
name path:name, name path:name,
referrerpolicy path:referrerpolicy, referrerpolicy path:referrerPolicy,
loading path:features.loading, loading path:loading,
allowpaymentrequest path:features.allowpaymentrequest, allowpaymentrequest path:features.allowPaymentRequest,
allowfullscreen path:features.allowfullscreen, allowfullscreen path:features.allowFullScreen,
src path:src" src path:src"
></iframe> ></iframe>
</div>`; </div>`;
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment