Question

我有一个与Grafana图链接的iframe标记，该标记支持交互作用（通过单击/双击iframe可以在x轴上放大/缩小）。

当我在新标签上打开iframe的src的网址时，我可以与图表进行交互，并看到浏览器的网址参数不断使用新的from / to值（指示图表的x轴范围）进行刷新。不幸的是，当它在iframe上时，无论如何我都看不到'src'属性的任何变化。我需要更改url参数，以应用于正在显示的其他图形（将它们全部同步）。

我该如何解决这种情况？

我在Angular的component.html上使用iframe：

import matplotlib.pyplot as plt
import numpy as np

y = np.random.randint(2, size=(20,20))
x = np.random.random(size=(20,20))
X = np.ma.array(x, mask=y)

fig = plt.figure()

plt.imshow(X, cmap="Greys")
plt.gca().set_facecolor("red")
plt.show()

渲染后的iframe：

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

一些屏幕截图：

更改前：https://i.imgur.com/6M5JoHX.png
更改后：https://i.imgur.com/MN0KIha.png

您可以看到src在两种情况下都保持相同的值。

Answer 1

src的属性没有改变，但是location对象的行为应与grafana位于iframe之外时的行为相同。

您有2个选项，

如果grafana的框架及其父框架来自同一来源，则可以使用iframe.contentWindow.location.href访问位置对象。
如果它们起源不同，则需要在框架与其父框架之间进行通信，可以使用postMessage。

检查以下示例：https://robertnyman.com/html5/postMessage/postMessage.html

Answer 2

您可以检测到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 -->

Answer 3

如果您不是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将在每个间隔上运行全局更改检测。总体而言，我的意思是它将使用默认的更改检测策略检查整个应用程序的所有子树。

Answer 4

您只需要将iframe的src设置为相同的旧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>

互动后如何获取iframe的刷新后的src

4 个答案: