Click here to Skip to main content
15,742,400 members
Please Sign up or sign in to vote.
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;
" src="

What I have tried:

I don't know where to start and googling didn't bring me anything useful.
Updated 17-Nov-22 22:26pm
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";
pkfox 18-Nov-22 3:27am    
Thanks Bob how can I call that code ( I've never used JavaScript ) from my page ?

1 solution

Something like this should work:
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[^]
Share this answer
pkfox 18-Nov-22 5:37am    
Thanks Richard

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

CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900