iframe - 如何在 Metro 应用程序中从 Web 上下文(Iframe)发出 javascript 警报。

标签 iframe windows-8 alert

在我的 Metro 应用程序中..我使用 iframe 加载 Web 应用程序 - 基本上是一个包含一些控件的表单,最后用户单击“完成”按钮,我想显示警报

我在地铁应用程序中知道。我们可以使用“new Windows.UI.PopupMessage”来显示警报。但我如何从网络上下文(Iframe)中执行相同的操作。

我的default.js中有一个函数(showalert();),我使用“new Windows.UI.PopupMessage”来显示消息。如果我尝试从 iframe 页面访问此功能,如“window.parent.showalert();”。我收到异常,说访问被拒绝。

请有人回复此问题,因为这对我来说非常重要。

感谢和问候 古瑟姆

最佳答案

您可以使用 HTML 5 的 postMessage 在上下文之间进行通信。

下面是一个简单示例的图像,后面是相关的代码片段; Bing Maps trip optimizer example 在更大规模上使用了相同的技术。

在本地上下文中运行的主页 (default.js) 包括通过以下标记加载到 Web 上下文中的 IFRAME(我省略了未更改的 元素以节省空间):

<body onload="localContext.onLoad();">
   <p style="margin-top: 150px">This is default.html in the local context</p>

   <div style="background-color: azure; width: 300px">
       <iframe src="ms-appx-web:///webpage.html" />
   </div>
</body>

localContext 在 default.js 中定义为

var localContext = {

    onLoad: function () {
        window.attachEvent("onmessage",
            function (msg) {
                if (msg.origin == "ms-appx-web://bfddc371-2040-4560-a61a-ec479ed996b0")
                    new Windows.UI.Popups.MessageDialog(msg.origin).showAsync().then();
            });
    }

};

它为 default.html 定义了一个 onLoad 函数,该函数向 onmessage 事件注册一个监听器,当该事件触发时,会显示 MessageDialog (或者您可以采取无论您想在本地环境中执行什么操作)。

请注意,message 事件回调的参数(此处为 msg)还包含一个 origin 属性,您可以检查该属性以确保您仅处理来自预期的消息发件人。

IFRAME 中托管的网页在按钮的 onclick 事件处理程序中调用 postMessage(您可能希望将调用拉到单独的 .js 文件而不是内联文件中)

<!DOCTYPE html>
<html>
    <head>
        <title></title>
    </head>
    <body>
        This is webpage.html loaded into an iFrame
        <button id="button" onclick="window.parent.postMessage('Hello from Web Context', '*');">Say Hello</button>
    </body>
</html>

关于iframe - 如何在 Metro 应用程序中从 Web 上下文(Iframe)发出 javascript 警报。,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12827495/

相关文章:

windows-8 - 如何在WinJS中绑定(bind)到 "self"

alert - XCUItest addUIInterruptionMonitor 未捕获 iOS14 模拟器和 xcode 12 上的警报

jquery - 加载页面时,使 iFrame 中的内容从底部开始

jquery - 有没有办法在每个 iframe 中获取父 css 链接 rel?

c# - 调试 Windows 8 的 XAML 解析错误的过程

javascript - 如何设计或自定义 React-admin 警报对话框?

visual-studio-2008 - Visual Studio 2008 在调试时播放错误声音

javascript - 如何将内容脚本注入(inject)本地页面

javascript - 在 Firefox 和 Chrome 的左侧显示 iframe 滚动条

c# - Windows 8 : How to undo & redo ink using built in Inking functionality?