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

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

4 голосов
/ 07 июня 2019

У меня есть тег iframe, связанный с графиком Grafana, который поддерживает взаимодействие (увеличение / уменьшение по оси x путем щелчка / двойного щелчка по элементу iframe).

Когда я открываю URL src iframe на новой вкладке, я могу взаимодействовать с графиком и видеть, что параметры URL моего браузера обновляются новыми значениями from / to (которые указывают диапазон оси x графика). К сожалению, когда он находится в iframe, я не вижу никаких изменений в атрибуте 'src' ни в одной ситуации. Мне нужно, чтобы изменения параметров URL применялись к другим отображаемым графикам (синхронизируйте их все).

Как я могу решить эту ситуацию?

Мой iframe на компоненте Angular: html: 

<iframe [src]="url_grafana_primary" width="100%" height="300" frameborder="0"></iframe>

Iframe после визуализации: 

<iframe _ngcontent-c8="" frameborder="0" height="300" width="100%" src="http://146.250.180.213/grafana/dashboard-solo/script/script_graph.js?scenario_id=rrc_succ_rate&amp;cell_id=ESICAS23B_ESICAS23&amp;refresh=5s&amp;orgId=1&amp;panelId=4&amp;from=1555045266010&amp;to=1555168469864&amp;var-cell_id=ESICAS23B_ESICAS23&amp;var-scenario_id=ESICAS23B_ESICAS23"></iframe>

Некоторые скриншоты:

Вы видите, что src сохраняет одинаковое значение в обеих ситуациях.

Ответы [ 4 ]

3 голосов
/ 11 июня 2019

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

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

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

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

0 голосов
/ 17 июня 2019

Вам просто нужно установить 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>
0 голосов
/ 17 июня 2019

В случае, если вы не являетесь владельцем контента в 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(),
);

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

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

0 голосов
/ 13 июня 2019

Вы можете обнаружить событие 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 -->
...