Change iframe attribute at runtime

Question

0.00/5 (No votes)

See more:

Hi all, I have the tag below in my _layout.cshtml file - as you can see it displays a clock from an online resource , what I would like to do is change the clock attribute at runtime to view the range of clock faces available. I believe it is possible using javascript but googling didn't bring me anything useful. Any ideas guys ?

<div align="center">
<iframe id="iframeclock"
scrolling="no" frameborder="0" clocktype="html5" style="overflow:hidden;
padding:0;
width:150px;
height:150px;
" src="https://www.clocklink.com/html5embed.php?
clock=033
&timezone=UnitedKingdom_London
&size=150
&From=2022,1,1,0,0,0">
</iframe>
</div>

What I have tried:

I don't know where to start and googling didn't bring me anything useful.

Posted 17-Nov-22 4:33am

pkfox

Updated 17-Nov-22 22:26pm

Add a Solution

Comments

Bob@work 17-Nov-22 17:24pm

You can create a script that alters the iframe URL's clock parameter. I don't think you can reach into the iframe's page and alter the clock - might be a cross-site security issue.

You'll need to alter the parameter for the clock faces you want to scroll through and then assign the new value to the iframe url. You can assign the value from a list, clickable images, random values. Changing to a digital watch:

var myClockFrame=document.getElementById('iframeclock');
var clockfaceid="040";
myClockFrame.src="https://www.clocklink.com/html5embed.php?"+
"clock="+clockfaceid+
"&timezone=UnitedKingdom_London"+
"&size=150"+
"&From=2022,1,1,0,0,0";

pkfox 18-Nov-22 3:27am

Thanks Bob how can I call that code ( I've never used JavaScript ) from my page ?

1 solution

Add a Solution

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Richard Deeming · Accepted Answer · 2022-11-17T22:26:00

Solution 1

Something like this should work:

JavaScript

const changeClock = (clock) => {
    const frame = document.getElementById("iframeclock");
    const url = new URL(frame.src, location.href);
    url.searchParams.set("clock", clock);
    frame.src = url.toString();
};

URL API - Web APIs | MDN[^]
Demo[^]

Posted 17-Nov-22 22:26pm

Richard Deeming

Comments

pkfox 18-Nov-22 5:37am

Thanks Richard

Change iframe attribute at runtime

1 solution

Solution 1

Add your solution here

Preview 0

Change iframe attribute at runtime

1 solution

Solution 1

Add your solution here

Preview 0

Existing Members

...or Join us