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 @@
main {
width: 200px;
height: 1200px;
background-color: #bc05a9;
background-color: #ede5eb;
}
</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 {
* @property {Object} actions Callbacks
* @property {string} actions.click="throw Error" Callback when clicked
* @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 {boolean} disabled=false Disabled state
*/
......@@ -137,14 +143,17 @@ class Iframe extends CustomElement {
name: "",
referrerpolicy: "no-referrer",
referrerPolicy: "no-referrer",
disabled: false,
features: {
allowfullscreen: true,
allowpaymentrequest: true,
loading: "egager",
allowFullScreen: true,
allowPaymentRequest: true,
replaceTargets: true,
},
loading: "eager",
actions: {
click: () => {
throw new Error("the click action is not defined");
......@@ -309,6 +318,16 @@ function initEventHandler() {
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;
}
......@@ -341,10 +360,10 @@ function getTemplate() {
<iframe data-monster-role="iframe"
data-monster-attributes="sandbox path:sandbox,
name path:name,
referrerpolicy path:referrerpolicy,
loading path:features.loading,
allowpaymentrequest path:features.allowpaymentrequest,
allowfullscreen path:features.allowfullscreen,
referrerpolicy path:referrerPolicy,
loading path:loading,
allowpaymentrequest path:features.allowPaymentRequest,
allowfullscreen path:features.allowFullScreen,
src path:src"
></iframe>
</div>`;
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment