Question

我有一个包含多个iframe的html页面，所有这些iframe都来自同一个域名，网址不同

＆＃13;

<!DOCTYPE html>
<html>
<head>
<title>testing</title>
</head>
<body>

<h1>TEst 1 </h1>
<iframe src="http://example.com?id=123" id="app"  width="100%" height="388" frameborder="0" scrolling="no"></iframe>

<h1>TEst 2 </h1>
<iframe src="http://example.com?id=456" id="app"  width="100%" height="388" frameborder="0" scrolling="no"></iframe>
</body>
</html>

＆＃13;

但在运行两个iframe时，同一页面呈现第一个两次或第二个呈现两次。如果单独使用它们，它们都能完美地工作，但为什么它们会相互覆盖？

Answer 1

您的代码应该有效。以下是使用您的代码的示例，只是用youtube视频替换了虚拟src网址。

https://jsfiddle.net/6gp1gyps/

<h1>TEst 1 </h1>
<iframe src="https://www.youtube.com/embed/UbB_NkQrDr4" id="app"  width="100%" height="388" frameborder="0" scrolling="no"></iframe>

<h1>TEst 2 </h1>
<iframe src="https://www.youtube.com/embed/jiFDY6N33aw" id="app"  width="100%" height="388" frameborder="0" scrolling="no"></iframe>

如果您不将ID用于其他控件，则可以为两者使用相同的ID。

Answer 2

您应该设置不同的ID;

<h1>TEst 1 </h1>
<iframe src="http://example.com?id=123" id="app"  width="100%" height="388" frameborder="0" scrolling="no"></iframe>

<h1>TEst 2 </h1>
<iframe src="http://example.com?id=456" id="app2"  width="100%" height="388" frameborder="0" scrolling="no"></iframe>

Answer 3

使用唯一ID：

工作代码：

<iframe id="app1" style="border-style: none; border-color: inherit; border-width: 0px; height:1222px; width:100%;" src="https://www.youtube.com/embed/XYviM5xevC8"></iframe>
    <iframe id="app2" style="border-style: none; border-color: inherit; border-width: 0px; height:1222px; width:100%;" src="https://www.youtube.com/embed/jiFDY6N33aw"></iframe>

请遵循：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe

Answer 4

我的代码没有任何问题。它甚至应该使用相同的ID。 然而问题出在网站上。该网站不支持同一页面中的多个版本。 无论如何，谢谢你的答案。

如何在单个html页面上显示同一域的多个iframe？

4 个答案: