【解決方法】実行時に iframe 属性を変更する

こんにちは、私の _layout.cshtml ファイルに以下のタグがあります。ご覧のとおり、オンラインリソースの時計が表示されます。実行時に clock 属性を変更して、使用可能な時計面の範囲を表示したいと考えています。 JavaScript を使用することは可能だと思いますが、グーグルで調べても何も役に立ちませんでした。アイデアはありますか？

<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>

私が試したこと：

どこから始めればいいのかわからず、グーグルで調べても何も役に立ちませんでした。

解決策 1

このようなものが動作するはずです:

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 API | MDN[^]
デモ[^]