Как получить обновленный src iframe после взаимодействия

Атрибут src не меняется, но объект location должен вести себя так же, как если бы графана находилась за пределами iframe.

У вас есть 2 варианта,

1. если кадр grafana и его родитель обслуживаются из одного и того же источника, вы можете получить доступ к объекту местоположения с помощью iframe.contentWindow.location.href.
2. если они имеют разное происхождение, вам необходимо установить связь между фреймом и его родителем, вы можете использовать для этого postMessage.

проверьте этот пример: https://robertnyman.com/html5/postMessage/postMessage.html

Вы можете обнаружить событие onload, но чтобы получить URL-адрес, вам нужно будет сохранить файл cookie или localStorage.

var firstTimeLoad = true; // Because the function will call on the initial page

function iframeLoad(iframe) {
  if (firstTimeLoad) {
    firstTimeLoad = false;
    return;
  }
  alert("New page load");
}

<iframe width = "400" height = "244" src = "https://wooden-utensil.github.io/linkingSite1/" onload = "iframeLoad(this)" frameBorder = "0"></iframe> <!-- linkingSite1 contains a link (a href) that links to linkingSite2, and vice versa -->

В случае, если вы не являетесь владельцем контента в iframe, вы мало что можете сделать. Лучшее, что вы можете сделать, это создать цикл (setInterval), который будет сравнивать значение с последним значением, которое вы видели.

<iframe #graph></iframe>

@ViewChild('graph', { static: true }) graph!: ElementRef<HTMLIFrameElement>;

private srcWatcher = new Observable(observer => {
  const interval = setInterval(() => {
    observer.next(this.graph && this.graph.nativeElement && this.graph.nativeElement.src);
  }, 10);

  return () => clearInterval(interval);
}).pipe(
  distinctUntilChanged(),
);

Имея observable как этот, вы теперь можете реагировать на любые изменения в нем.

ПРИМЕЧАНИЕ: Я бы также предложил, чтобы наблюдаемый объект выполнялся за пределами zoneJS, если тайм-аут интервала должен быть низким. В противном случае Angular запускал бы обнаружение глобальных изменений на каждом интервале. Под глобальным я подразумеваю, что он будет проверять все приложение, все поддеревья, которые используют стратегию обнаружения изменений по умолчанию.

Вам просто нужно установить src iframe на тот же старый src. Возможно, вам придется добавить переменную строки запроса со случайным числом, например с отметкой времени, чтобы избежать проблем с кэшированием.

function refresh(){
		var iframe = document.getElementById('myframe');
		iframe.src = iframe.src;
	}

iframe{
width:100%;
height:300px;
}

<p>
	<button onclick = "refresh()">Refresh</button>
</p>
<iframe id = "myframe" src = "https://www.chartjs.org/samples/latest/charts/line/basic.html" frameborder = "0"></iframe>