In my metro app ..I am using iframe to load a web application - basically a form which contains some controls and finally user click on finish button and i want to show alert
i know in metro app. we can give the alert using "new Windows.UI.PopupMessage" to show the alert. but how can i do the same from the web context(Iframe).
i have a function (showalert();) in my default.js where i am using the "new Windows.UI.PopupMessage" to show messages. if i am trying to access this function from iframe page like "window.parent.showalert();". i get exception saying access denied.
Please someone reply to this as this is very critical for me.
thanks & regards
Goutham
You can use HTML 5's postMessage to communicate between contexts.
Below is an image of a simplistic example with the relevant code snippets following it; the Bing Maps trip optimizer example uses this same technique on a grander scale.
The main page (default.js), which is running in the local context, includes an IFRAME loaded in web context via the following markup (I left out the unchanged <head> element to save space):
<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 is defined in default.js as
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();
});
}
};
and it defines an onLoad function for default.html that registers a listener to the onmessage event, and when that event fires a MessageDialog is shown (or you can take whatever action you want to do in the local context).
Note that the parameter to the message event callback (msg here) also includes a origin property that you can check to make sure you're only handling messages from expected senders.
The web page hosted in the IFRAME calls postMessage in the onclick event handler of a button (you'll probably want to pull the invocation a separate .js file versus in-line)
<!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>
Related
I'm modifying a cefsimple app to meet my needs. I have a long starting thread at the background so it takes a while until the web page is shown (5-10 secs). In the meanwhile I want to show some kind of splash screen, or at least some HTML before the main page is rendered. What's the best (or any) way to do it?
Thanks in advance!
We have an html file compiled into our application and we pass that URL to CefBrowserHost::CreateBrowserSync().
See resource_util_win.cpp in cefclient sample, in particular GetResourceId() for associating the URL to the compiled resource ID.
Meanwhile, the body of our splashscreen.html has
<body class="splash" onload=" pageLoad() ">
and the pageLoad() looks like
function pageLoad() {
window.location = "www.yourrealurl.com";
}
}
Our splash screen has a background set by style sheet and an animated gif, and it goes away as soon as the requested url comes in.
If you have already gotten the server response but it takes a long time to render, this won't help. We use Angular in the loaded page to hide it until it is finished loading its dependencies.
<div ng-cloak class="ng-cloak" ng-if="IsInitDone()">
I am using javascript and I need to display an alert only once when the user click anywhere in the site. But make sure it will not pop up everytime the user click anywhere.
Im not professional but I need this code to embed in my e-commerce site. I have tried a regular onload alert. but it will show once the page is loaded. then i tried this automatic code:
</html>
<head>
<script language="JavaScript">
<!--
document.onclick = myClickHandler;
function myClickHandler() {
alert("All orders require minimum two weeks notice due to the nature of event and wedding products");
}
-->
</script>
</head>
<body>
</html>
and works, but every time I click appear and that is annoying. I need a onclick event, anywhere in the page... to display an alert only once. to advise the user about important info.
Desperatly need some solution. Thanks
$(function () {
$(document).on('click.once', function () {
alert("Alerted once");
$(document).off('click.once');
})
});
This makes use of the .off() and named event feature in jQuery.
.off feature
event namespaces
I have a web application that creates a graph on another aspx page. Sometimes the graph cannot be created to specification because there is an error in the user specification (such as a string where an integer was expected).
I would like to immediately pop up an alert window telling them that something went wrong when I was trying to render the graph.
The thing is, I don't know how to immediately check to see if I should insert a script for an alert window. Once my code on "chart.aspx"(image URL) is executed, I don't know how to immediately check if anything went wrong from the main page. I know it happened in the code in chart.aspx, but other than not to not render the image or render a different image, I don't know how to tell the user before another postback. I would really like to see if there is any sort or event or stage in the page lifecycle after one of the images is rendered.
If this is not possible, how can I chart.aspx convey an error message to default.aspx if it is simply an image. Maybe some sort of Response.Write(...?)
Thanks again guys.
Maybe you could try monitoring the image's load events and handle onabort and onerror via javascript?
http://www.w3schools.com/jsref/dom_obj_image.asp
Image Object Events
Event The event occurs when...
onabort Loading of an image is interrupted
onerror An error occurs when loading an image
onload An image is finished loading
The old school way of doing this would be to render your image tag like below:
<img src="chart.aspx" onerror="alert('Image failed to load because XYZ.');" />
Nowadays, I'd recommend you use jquery, something like this:
<img src="placeholder.gif" class="chart" alt="chart">
<script type="text/javascript">
jQuery(function($) {
var img = $(document.createElement('img'));
img.on('error', function() { alert ('...'); });
img.on('load', function() { $('img.chart').attr('src', img[0].src); });
});
I have been developing a service that allows users to insert information from my database onto their sites by using iframes. The only problem was that the iframe needs to be resizeable and this is one of the biggest problems with iframes as most people already know, aswell as the fact I can access objects on the parent page from within the iframe and vice versa.
I have thought of making an asp.net web servie to server up the HTML and access it by using a get request. However this also has a problem since these request can only be made from the same domain?
What I need to know is the best way to retrieve a small piece of HTML containing customer reviews from server and display it on their page using some sort of AJAX.
Thanks
if your users can add a < script > line to their site pointing to code on your site, you can fairly easily offer a mechanism to build a floating (and resizable) DIV on their page that you jquery.load() with content from your site ...
example:
"To use my service on your site, add the following line to your < head >"
<script type='text/javascript' src='http://mysite.com/scripts/dataget.js />
then add a link or button anywhere and give it a class 'get-date-from-mysite'
< input type='button' value='Click to see the data' class='get-data-from-mysite' />
--
Then in that script you do (something like):
$(function() {
$('.get-data-from-mysite').click(function() {
$('body').append("<div id='mydiv' 'style=position:absolute; z-index:999; left: ...
$('#mydiv').load(' .... // url that sends html for content
});
...etc
resize-able div stuff needs to be added too
I think the jQuery library might be what you need - specifically, look into jQuery Ajax.
Following on what Scott Evernden is explaining, you can add a <script> tag such as:
<script id="my_script_tag" type='text/javascript' src='http://mysite.com/scripts/dataget.js' />
Inside dataget.js you can simply reference the script tag itself by using its "id" (document.getElementById("my_script_tag");) and replace it (insertBefore()) with relevant data.
To get the data from your server you can use JSONP (lots of stuff on SO as well), which is an ajax technique for cross-domain communication.
I have a button on my webform. Clicking this button will do an HttpWebRequest during the onclick event handler. After the request we copy the response from the request into HttpContext.Current.Response and send that to the client.
This web request can take a while (up to 5 seconds, since it's generating a report). During this time the user has no indication that anything is going on, except for the browser progress bar and the spinning IE icon (if they're using IE). So I need a loading indicator while this is happening.
I've tried using javascript that fires during the button's onclick event (using OnClientClick) and while that works, I don't know how to find out when the web request is finished. Since we just send the response to the client, a full postback doesn't happen.
I've tried wrapping the button in an UpdatePanel and using the UpdateProgress, but when we send the response to HttpContext.Current.Response and call Response.End(), we get an error in the javascript, since the response isn't well formed (we're sending back an excel sheet for the user to download).
Since we're sending back a file for users to download, I don't want to pop-up a separate window, since then in IE they'd get the information bar blocking the download.
Any ideas here?
As an alternative to the Professional AJAX.NET library, jQuery has a really nice way of doing this.
Take a look at this example of using a .NET PageMethod (if possible in your scenario).
You define a page method call in jQuery, you can tack on your loading... message in a hidden div.
Say what callback you want to return on success (ie when your 5 second report is generated)
then hide the loading and handle the data.
Take a look at the javascript on my contact page for an example (view the source).
I have a a button on the page, add the jQuery onClick.
When clicked that shows a hidden loading div, makes an ajax call to a page method that takes the parameters of the form.
The page method does emailing etc then returns to the form in the onSuccess javascript method I have there.
The onSuccess hides the loading div.
A simple trick i have used in the past is to redirect to an intermediate page with an animated progress bar (gif) and then have that page do the REAL post of the data.
(or even pop-up a layer with the animation on it and a polite message asking the user to wait a minute or two)
The simple feedback of the animated gif creates the illusion to the end user that the app is not stalled and they will be more patient.
Another approach is to hand the data off to a worker thread and return immediately with a message stating that the report will be emailed or made available in the "reports" section of the site when it is ready. This approach lacks the benefit of instant notification when the report is completed though.
Here is my solution :
Download and examine the samples of free Professional AJAX.NET library.
Write a AjaxMethod that creates your file and returns file location as a parameter.
Write your Client-Side function to call method at Step 2. When this method called show an indicator.
Write a client-side callback method to hide indicator and show/download file that user requested.
Add your client-side function calls yo your button element.
When your method at server-side ends your callback will be called.
Hope this helps !
The solution I'm presenting here is aimed to show a method to let a "Loading..." box to appear while you're server-side processing and to disappear when server-side processing is complete.
I'll do this with the very basic AJAX machinery (tested on FF, but IE should be ok either), i.e. not using a framework like Prototype or jQuery or Dojo, as you didn't specify your knowledge about them.
To let you better understand the trick, the following is just a small example and doesn't pretend to be an out-of-the-box solution. I tend not to be superficial, but I think a clearer example can explain better than many words.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>First Example</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style>
.hidden {
display: none;
}
.loadingInProgress {
color: #FFFFFF;
width: 75px;
background-color: #FF0000;
}
</style>
<script type="text/javascript">
var httpRequest;
if (window.XMLHttpRequest) { // Mozilla, Safari, ...
httpRequest = new XMLHttpRequest();
httpRequest.overrideMimeType('text/xml');
} else if (window.ActiveXObject) { // IE
try {
httpRequest = new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e) {
try {
httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e) {}
}
}
if (!httpRequest) {
alert('Giving up :( Cannot create an XMLHTTP instance');
}
httpRequest.onreadystatechange = function(){
switch (httpRequest.readyState) {
case 1: // Loading
document.getElementById('loading').className = "loadingInProgress";
break;
case 4: // Complete
document.getElementById('loading').className = "hidden";
if (httpRequest.status == 200) {
// perfect!
} else {
// there was a problem with the request,
// for example the response may be a 404 (Not Found)
// or 500 (Internal Server Error) response codes
}
break;
}
};
function go() {
httpRequest.open('GET', document.getElementById('form1').action, true);
httpRequest.send('');
}
</script>
</head>
<body>
<div id="loading" class="hidden">Loading...</div>
<form id="form1" name="form1" action="doSomething.php">
<input type="button" value="Click to submit:" onclick="go()" />
</form>
</body>
</html>
As you can see, there's a <div> which holds the "Loading..." message.
The principle is to show/hide the <div> depending on the XMLHttpRequest object's readyState.
I've used the onreadystatechange handler of the XMLHttpRequest to trigger the readyState change.
The back-end php script I use (declared as the form's action) does just a sleep(5), to let the "Loading..." message appear for 5 secs.
<?php
sleep(5);
header('Cache-Control: no-cache');
echo "OK";
?>
The Cache-control: no-cache header is necessary, since usually if you don't set it the browser will cache the response avoiding to resubmit the request if you should need to.
A good source for "getting started" AJAX documentation is Mozilla MDC.
The whole thing could be much more gently handled by a Javascript framework like Prototype, taking advantage of its browser-safe approach, saving you hours of debug.
Edit:
I chose php 'cause I don't know ASP.NET nor ASP, sorry about that.