Iframe的页面中的js获取父页面的元素

Question

default.html页

<div class="contentContainer">
   <iframe id="baiduMap" src="ms-appx-web:///pages/IFrame.html" class="map"></iframe>
   <div id="testPage"></div>  
</div>

IFrame.html页里 怎么用js获取到 default.html页的div

<div id="testPage"></div>  

Answer 1

Hi,

抱歉我对JavaScript不熟悉，我会让更多的微软专家来帮助你。

你可以把帖子翻译成英文发到这个论坛，我想很快会有人给你解答：

http://social.msdn.microsoft.com/Forums/en-US/winappswithhtml5/threads

---

Aaron
MSDN Community Support | Feedback to us
Develop and promote your apps in Windows Store
Please remember to mark the replies as answers if they help and unmark them if they provide no help.

Answer 2

龙九子 你好，

Windows Store App 和普通的web 页面编程模型有所不同。传统web页面中通过js直接操纵父窗口，或者iframe子窗口中的DOM对象的方法不能直接使用。在Windows Store app中我们一般需要通过 html5 的 postMessage （可以在window 对象上调用）。下面是这个方法对应的文档：

#postMessage method (Windows)
http://msdn.microsoft.com/en-us/library/windows/apps/hh441295.aspx

http://social.msdn.microsoft.com/Forums/eu/winappswithhtml5/thread/e46aa6a9-d79b-4431-a40c-7d443b24525e

比如说要从iframe的页面中忘父页面发送消息，就可以用 window.parent.postMessage(...)， 传入对应的参数。值得注意的是，iframe页面必须是你自己写的并且也是在windows store app 项目中的，我们不能针对第三方或者一个随意的internet页面使用这个方式。同时我推荐你可以看以下下面这本免费的windows store html5 编程电子书。第二章的示例中就有一个详细的使用 postMessage的例子，非常不错。

#windows 8 app: how to get or modify iframe's content 
http://social.msdn.microsoft.com/Forums/eu/winappswithhtml5/thread/e46aa6a9-d79b-4431-a40c-7d443b24525e

---

Please remember to mark the replies as answers if they help and unmark them if they provide no help.

Answer 3

龙九子 你好，

Windows Store App 和普通的web 页面编程模型有所不同。传统web页面中通过js直接操纵父窗口，或者iframe子窗口中的DOM对象的方法不能直接使用。在Windows Store app中我们一般需要通过 html5 的 postMessage （可以在window 对象上调用）。下面是这个方法对应的文档：

#postMessage method (Windows)
http://msdn.microsoft.com/en-us/library/windows/apps/hh441295.aspx

http://social.msdn.microsoft.com/Forums/eu/winappswithhtml5/thread/e46aa6a9-d79b-4431-a40c-7d443b24525e

比如说要从iframe的页面中忘父页面发送消息，就可以用 window.parent.postMessage(...)， 传入对应的参数。值得注意的是，iframe页面必须是你自己写的并且也是在windows store app 项目中的，我们不能针对第三方或者一个随意的internet页面使用这个方式。同时我推荐你可以看以下下面这本免费的windows store html5 编程电子书。第二章的示例中就有一个详细的使用 postMessage的例子，非常不错。

#windows 8 app: how to get or modify iframe's content 
http://social.msdn.microsoft.com/Forums/eu/winappswithhtml5/thread/e46aa6a9-d79b-4431-a40c-7d443b24525e

---

Please remember to mark the replies as answers if they help and unmark them if they provide no help.

电子书的地址好像发错了 能重新发一个么？

谢谢

Answer 4

龙九子 你好，

Windows Store App 和普通的web 页面编程模型有所不同。传统web页面中通过js直接操纵父窗口，或者iframe子窗口中的DOM对象的方法不能直接使用。在Windows Store app中我们一般需要通过 html5 的 postMessage （可以在window 对象上调用）。下面是这个方法对应的文档：

#postMessage method (Windows)
http://msdn.microsoft.com/en-us/library/windows/apps/hh441295.aspx

http://social.msdn.microsoft.com/Forums/eu/winappswithhtml5/thread/e46aa6a9-d79b-4431-a40c-7d443b24525e

比如说要从iframe的页面中忘父页面发送消息，就可以用 window.parent.postMessage(...)， 传入对应的参数。值得注意的是，iframe页面必须是你自己写的并且也是在windows store app 项目中的，我们不能针对第三方或者一个随意的internet页面使用这个方式。同时我推荐你可以看以下下面这本免费的windows store html5 编程电子书。第二章的示例中就有一个详细的使用 postMessage的例子，非常不错。

#windows 8 app: how to get or modify iframe's content 
http://social.msdn.microsoft.com/Forums/eu/winappswithhtml5/thread/e46aa6a9-d79b-4431-a40c-7d443b24525e

---

Please remember to mark the replies as answers if they help and unmark them if they provide no help.

还有就是我父页面向子页面发送消息 用postMessage可以。

但是子页面向父页面用window.parent.postMessage(...)这种方式，父页面怎么接收呢。

我在父页面里 

window.addEventListener("message", function (event) {});

window.addEventListener("onmessage", function (event) {});

 这样注册了两个事件 都无法接受到数据

请指点！！！

Answer 5

Hi,

电子书的地址你可以看：

http://blogs.msdn.com/b/microsoft_press/archive/2012/06/04/free-ebook-programming-windows-8-apps-with-html-css-and-javascript-first-preview.aspx

---

Aaron
MSDN Community Support | Feedback to us
Develop and promote your apps in Windows Store
Please remember to mark the replies as answers if they help and unmark them if they provide no help.

Answer 6

Hi,

电子书的地址你可以看：

http://blogs.msdn.com/b/microsoft_press/archive/2012/06/04/free-ebook-programming-windows-8-apps-with-html-css-and-javascript-first-preview.aspx

---

Aaron
MSDN Community Support | Feedback to us
Develop and promote your apps in Windows Store
Please remember to mark the replies as answers if they help and unmark them if they provide no help.

用电子书中的 例子 已解决 

感谢