在HTML页面的iframe内显示警告框

Question

有一个简单的HTML页面，名为abc.html。现在abc.html有一个名为“click me”的按钮。此页面abc.html还有一个带有id名称“myframe”的iframe。

现在我想要的是，当点击“click me”按钮时，在名为“myframe”的iframe内应该出现一个警告框。我该如何做到这一点？

我尝试了以下方法...

window.frames[0].contentWindow.alert("this is the iframe");

但似乎这并没有起作用。请告诉我为什么它不起作用，以及可能的替代方案是什么。

- qre0ct

---

如果IFRAME内容是从另一个URL加载的，则无法通过JavaScript访问/修改这些内容。 - feeela

好的，但我不想修改/访问从iframe加载的来自不同URL的页面内容。我只想在iframe的窗口对象中显示一个警告框。这可能吗？ - qre0ct

Answer 1

ContentWindow继承自document，而不是window。

您需要做的是将警报添加到iframe页面上的函数中，然后使用document.getElementById('targetFrame').contentWindow.targetFunction();调用它（以targetFunction为例）。这个答案可能会给您提供更多的技术信息。

- jett

---

你说contentWindow是从document而不是window派生的，但根据W3cSchools教程，contentWindow是iframe对象的属性。其次，iframe加载一个我无法控制的不同URL。因此，我无法修改iframe的内容。 - qre0ct

作为解决此问题的方法，只需创建一个包含完整页面框架的新页面，并将JavaScript添加到该页面中即可。而且你是正确的，但页面中的元素是从文档类派生的子类，因此我的陈述也是正确的，但是以抽象的方式表达。 - jett

谢谢Jett...但你介意详细解释一下你的hack吗？ - qre0ct

创建一个名为inlinepage.html的新文件，在该文件中创建一个指向您当前iframe指向的位置的框架。使其全屏。还要在此页面中添加一个脚本，其中包含一个警报框的函数。现在，让您的iframe指向inlinepage.html，然后您就可以开始了。 - jett

Answer 2

如果<iframe>的源自与父页面不同的域，则会遇到浏览器的同源策略，这意味着您无法对该页面执行任何操作。

对于“替代建议”，它确实取决于您要实现什么以及用户应该体验什么。

- freefaller

---

好的，这是我真正想做的事情。我想要检查 iframe 上的滚动条是否已经滚动，当 iframe 中的页面加载完成时。为了实现这个目标，我考虑使用 window 对象的 pageXOffset 和 pageYOffset 属性。现在我想知道 iframe 返回的 window 对象是否也支持这些属性。因此，为了检查这一点，我尝试使用 alert 方法和从 iframe 返回的 window 对象。 - qre0ct

@geek，不确定你是否理解我的意思...同源策略意味着你无法对该页面进行任何操作。这包括更新和检测 - 你无法访问任何内容。 - freefaller

好的，我理解同源策略的限制。那么在iframe窗口加载页面后，我就无法检测它是否已经滚动了吗？ - qre0ct

@Geek，据我所知没有这样的东西... 如果真有，我就吃帽子！ - freefaller

您可能可以编辑htaccess文件或Nginx配置文件以允许跨域请求（它们可能需要是相同父域的子域，您肯定需要拥有并能够编辑这些文件）。 - Ryan

Answer 3

浏览器级别的alert与特定框架没有明显的关联。您将始终获得一个在浏览器窗口居中显示的警报，而不是在调用它的窗口/框架上居中显示。

JSFiddle演示此功能

如果您需要此功能，则必须使用自己的模态对话框或库来呈现它们。

- Ryan Kinal

---

（非常挑剔的警告）它在Chrome中...警告框的标题栏显示“页面xxx说：” - freefaller

好的观点！ 显然我根本不注意警报标题。 - Ryan Kinal

说实话，我以为其他浏览器也可以，但在我快速测试的FF12或IE9中并没有。警报就像交通标志一样，你看得越多，就越容易忽略！ - freefaller

Answer 4

这可能对你有帮助：

function body_load()
{       
    document.getElementById('loader').src;
}

<div id='mydiv'>
    <input type="button" value="Click Me" onclick="body_load();" />
</div>
<iframe id='loader' onload="body_load(this)" name="Google"  scrolling="auto" style="width:95%;height:600px" src="http://www.image.com"></iframe>

http://jsbin.com/idazul/1/edit

- Nikhil D

---

即使这样做似乎也不起作用，无论如何，如果我使用你建议的document.getElementById('loader').contentWindow.alert("this is the iframe")或者我在尝试中使用window.frames[0].contentWindow.alert("this is the iframe")，它会有什么影响呢？毕竟两者都是在做同样的事情。 - qre0ct

当您在按钮单击时调用此警报，出了什么问题？ - Nikhil D

在按钮点击时，警告框没有弹出。无论是在主窗口还是在 iframe 中都没有弹出。 - qre0ct

不...兄弟...那不是我想要的。我想要的是一个简单的警告框，位于一个 iframe 内部。当这个 iframe 载入时，它有另一个网站的主页。 - qre0ct

让我们在聊天中继续这个讨论：http://chat.stackoverflow.com/rooms/15842/discussion-between-geek-ji-and-nikhil - qre0ct