I have coded a widget for my website, and I want the the widget to open up a new page on the current tab, but regardless what tag I use (even when I add target =“blank”) it will only open the page in with the iframe, is there a way I can allow it to open a new page completely within the same browser tab instead of just within the iframe?
Regards
E
This is more of a generic Javascript question than a Velo question but you’ll probably want to use Javascript’s window.open() method Window: open() method - Web APIs | MDN
Can this work, even if he is within the iFrame? 
I am not sure.
@user473 (by the way → change your prison-ID to a normal user or nickname) 
You can try and test this code, but i don’t think it will work.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Open New Tab from Iframe</title>
</head>
<body>
<!-- The iframe -->
<iframe id="myIframe" src="https://www.example.com" width="600" height="400"></iframe>
<!-- Button to trigger opening new tab -->
<button onclick="openNewTab()">Open New Tab</button>
<script>
// Function to open a new tab
function openNewTab() {
// Check if we're in the iframe
if (window.self !== window.top) {
// If we are in the iframe, use the parent window to open the new tab
window.parent.open("https://www.anotherexample.com", "_blank");
} else {
// If not in the iframe, just open the new tab in the current window
window.open("https://www.anotherexample.com", "_blank");
}
}
</script>
</body>
</html>
This will surely work when you use it local on your pc.
On my opinion → you will have to connect html to your wix-page sending the a signal to run a function on wix-page.
I have coded a widget for my website
By the way, how did you create your widget? → Wix-Blocks?
Some cursory googling suggested it might but I’ve not tried it myself.
Thank you @CODE-NINJA . I’ve just tried it, and it’s still not working as intended. I have coded he widget inside the Visual Studio Code before copying it over.
I have also tried windows.open, windows.location(), windows.location.replace() as well, and none of those work too.
Regards
E
Ok, if it is not a Wix-Blocks-Generated-Widget, then what kind of Widget is it?
You may want to provide the code, if not a secret?
Your widget was written in what kind of code?
HTML+CSS+JS ?
That means you can run it inside a HTML-Component?
Since you are not working on the Wix-Editor (instead working with V-Studio), i just can’t imagine how you do it (i do not use VS).
First you write your code inside of VS and then manually implement it on the Wix-Editor?
Or did you connect your VS directly to wix?
If you really use VS just for creating of widgets, why not using more simple environment for it, like CODE-PEN or JS-FIDDLE ?
Hi @CODE-NINJA,
I simply just write the code and then using the embed function on the wix studio to embed it on my webpage. Thanks again
here’s the code that I have:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ticker Tape</title>
<style>
/* ===== Fonts ===== */
@font-face {
font-family: "Helvetica";
src: local("Helvetica"), url("//db.onlinewebfonts.com/t/68d7ff963a65763581b048ca3cc3d178.eot");
src: local("Helvetica"), url("//db.onlinewebfonts.com/t/68d7ff963a65763581b048ca3cc3d178.eot?#iefix")
format("embedded-opentype"),
url("//db.onlinewebfonts.com/t/68d7ff963a65763581b048ca3cc3d178.woff2")
format("woff2"),
url("//db.onlinewebfonts.com/t/68d7ff963a65763581b048ca3cc3d178.woff")
format("woff"),
url("//db.onlinewebfonts.com/t/68d7ff963a65763581b048ca3cc3d178.ttf")
format("truetype"),
url("//db.onlinewebfonts.com/t/68d7ff963a65763581b048ca3cc3d178.svg#MTTMilano-Medium")
format("svg");
}
/* ====== Ticker-Tape ====== */
.ticker-tape-section {
overflow: hidden;
margin: 0px -0px;
}
.ticker-tape-section__container {
display: flex;
position: static;
left: 0;
right: 0;
}
.ticker-tape__text-block {
display: flex;
justify-content: flex-start;
animation: autoSliderOne 40s linear infinite;
animation-delay: -40s;
animation-play-state: running;
animation-direction: normal;
}
.ticker-tape__text-block:nth-child(2) {
animation: autoSliderTwo 40s linear infinite;
animation-delay: -20s;
}
.ticker-tape--text {
flex: 1;
margin-right: 20px;
font-family: "Helvetica", Arial, sans-serif; /* Set font to Helvetica */
font-size: 21px;
line-height: 24px;
font-weight: 400;
color: white; /* Change font color to white */
text-transform: uppercase;
white-space: nowrap;
}
@keyframes autoSliderOne {
0% {
transform: translateX(100%);
}
100% {
transform: translateX(-100%);
}
}
@keyframes autoSliderTwo {
0% {
transform: translateX(0%);
}
100% {
transform: translateX(-200%);
}
}
</style>
</head>
<body>
<div class="ticker-tape-section">
<div class="ticker-tape-section__container">
<div class="ticker-tape__text-block">
<a href="https://example.com" class="ticker-tape--text">Free international delivery on orders over £200.</a>
</div>
<div class="ticker-tape__text-block">
<a href="https://example.com" class="ticker-tape--text">Free international delivery on orders over £200.</a>
</div>
</div>
</div>
</body>
</html>
Here your UPGRADED-VERSION, with wished functionality…
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ticker Tape</title>
<style>
/* ===== Fonts ===== */
@font-face {
font-family: "Helvetica";
src: local("Helvetica"), url("//db.onlinewebfonts.com/t/68d7ff963a65763581b048ca3cc3d178.eot");
src: local("Helvetica"), url("//db.onlinewebfonts.com/t/68d7ff963a65763581b048ca3cc3d178.eot?#iefix")
format("embedded-opentype"),
url("//db.onlinewebfonts.com/t/68d7ff963a65763581b048ca3cc3d178.woff2")
format("woff2"),
url("//db.onlinewebfonts.com/t/68d7ff963a65763581b048ca3cc3d178.woff")
format("woff"),
url("//db.onlinewebfonts.com/t/68d7ff963a65763581b048ca3cc3d178.ttf")
format("truetype"),
url("//db.onlinewebfonts.com/t/68d7ff963a65763581b048ca3cc3d178.svg#MTTMilano-Medium")
format("svg");
}
/* ====== Ticker-Tape ====== */
.ticker-tape-section {
overflow: hidden;
margin: 0;
padding: 10px;
background-color: #333;
}
.ticker-tape-section__container {
display: flex;
position: relative;
}
.ticker-tape__text-block {
display: flex;
align-items: center;
padding: 0 20px;
}
.ticker-tape--text {
font-family: "Helvetica", Arial, sans-serif; /* Set font to Helvetica */
font-size: 18px;
line-height: 1.5;
font-weight: 400;
color: white;
text-decoration: none;
text-transform: uppercase;
}
.ticker-tape__text-block:nth-child(1) {
animation: autoSliderOne 15s linear infinite;
}
.ticker-tape__text-block:nth-child(2) {
animation: autoSliderTwo 15s linear infinite;
}
@keyframes autoSliderOne {
0% {
transform: translateX(100%);
}
100% {
transform: translateX(-100%);
}
}
@keyframes autoSliderTwo {
0% {
transform: translateX(0%);
}
100% {
transform: translateX(-200%);
}
}
</style>
</head>
<body>
<div class="ticker-tape-section">
<div class="ticker-tape-section__container">
<div class="ticker-tape__text-block">
<a href="https://example.com" class="ticker-tape--text" onclick="window.open(this.href, '_blank')">Free international delivery on orders over £200.</a>
</div>
<div class="ticker-tape__text-block">
<a href="https://example.com" class="ticker-tape--text" onclick="window.open(this.href, '_blank')">Free international delivery on orders over £200.</a>
</div>
</div>
</div>
</body>
</html>
Anthony was → RIGHT <— —> it is possible like it seems.
At least it works on a JS-Fiddle-Test-Environment.
Thanks @CODE-NINJA & @anthony !
I have tried out the code, yeah, it did open the page in a new browser window/tab, but would it be possible to have it open on the same browser tab? Thank you all again for your time.
E
You mean to open in same window? Now i am confused.
—> (this.href, ‘_blank’)
→ change to
—> (this.href, '_self ') ----> ???
Sorry! Yeah, I mean to open in the same window. My apologies for not being too clear…LOL
But again, thank you 