I have an CWE (Conversation Window Extension) for Lync. I wish to call javascript on the hosting page when my CWE gets loaded.
public MainPage()
{
try
{
HtmlPage.RegisterScriptableObject("MainPage", this);
HtmlPage.Window.Invoke("callmeonPageLoad");
}
catch (Exception ex)
{
MessageBox.Show(ex.Message + "|" + ex.InnerException);
}
}
callmeonPageLoad looks like this
function callmeonPageLoad() {
if (typeof jQuery == 'undefined') {
alert("jQuery is not loaded")
} else {
alert("jQuery is loaded")
}
}
If I run this app outside Lync jQuery gets loaded. Inside app it does not. So, I cannot call any jQuery function. This is valid only if I wish to call it when page is loading (calling from MainPage).
If I implement a button in Silverlight app and make it call same javascript. jQuery is loaded already an both cases.
My question is how to call javascript which contains jquery when app is loading.
Did more investigation and found out that even such page (set as CWE) do not load jQuery
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>
<body>
<h1>jQuery</h1>
<div id="result"></div>
<script type="text/javascript">
alert(typeof jQuery);
</script>
</body>
</html>
Problem was related to jQuery location and version. It works with
<script type="text/javascript" src="Scripts/jquery-1.11.2.min.js"></script>
but does not
<script type="text/javascript" src="Scripts/jquery-2.1.3.min.js"></script>
Related
I'm a little bit confused about how cordova works (i'm using android)...i've got an html page with this button:
<button id="mannaggia">mannaggia</button>
i'm trying to insert a javascript tag:
<script>
document.getElementById("mannaggia").addEventListener("click", myFunction);
myFunction(){
alert('is anybody out there?');
window.location="pag2.html";
}
</script>
nothing happens..
trying to insert a function in index.js outside this page is the same result...thank you
The function is declared after you added the event listener, so myFunction was undefined. Try putting the function before you add listener.
Revisit your html file once again.
best place to start your code are inside the device ready event
read more here Phonegap
<!DOCTYPE html>
<html>
<head>
<title>Device Ready Example</title>
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script type="text/javascript" charset="utf-8">
// Wait for device API libraries to load
//
function onLoad() {
document.addEventListener("deviceready", onDeviceReady, false);
}
// device APIs are available
//
function onDeviceReady() {
// Now safe to use device APIs
}
</script>
</head>
<body onload="onLoad()">
</body>
</html>
I have a question about javascript function flow. I am building a chrome extension where one javascript file creates a popup window using window.open. Based on the button selected in the popup, a variable is set and a function in the original javascript function should be called. But, it doesn't recognize that function from the original javascript file. I don't want to include file1 in file2's header, because other functions that I don't need would be called within file2. How do I handle this case?
A snippet of my code is the following:
in default_popup.html
<html
<head>
<script type="text/javascript" src="login.js"></script>
</head>
</html>
in login.js
function login() {
if (token === null) {
var url = chrome.extension.getURL('options.html');
window.open(url);
}
else {....}
function auth(url) {
............
}
//other functions here
in options.html
<html>
<head>
<script type="text/javascript" src="redirect.js"></script>
</head>
<body>
<button id="button1">Option1</button>
<button id="button2">Option2</button>
</body>
</html>
in redirect.js
var url;
document.getElementById('button1').onclick = function() {
url = 'url_one.com';
auth(url)
}
document.getElementById('button2').onclick = function() {
url = 'url_two.com';
auth(url);
}
Create a different JS file and you can call it common.js.
Transfer all the functions that needs to be accessed by both files there.
It is possible passing a function in the window reference, however chrome security setting may interfere that with local files because of the "same origin security principal", it works in other browsers on local, not sure in server pages and extension, so worth the test, follow the example:
html1:
<html>
<head>
<script type="text/javascript">
function test(){
var windowRef = window.open('test2.html');
windowRef['auth'] = function(){windowRef.document.write('property transferred')}
}//here you'll reference your auth function.
</script>
</head>
<body>
<input type="button" value="test" onclick="test()" >
</body>
</html>
html2:
<html>
<head>
<script type="text/javascript">
window['auth']() //the function to call, window.auth() should work too.
</script>
</head>
<body>
new window
</body>
</html>
The output will be a new window with "property transferred" in it.
i am trying to get a page to load using Geobytes.
<html>
<head>
</head>
<body style="background: transparent; border: none;">
<script src="http://gd.geobytes.com/Gd?pages=US&ext=html&after=-1" language="Javascript"></script><script language="javascript">// <![CDATA[
if(typeof(sGeobytesLocationCode)!="undefined"&&sGeobytesLocationCode.indexOf('US')==0)
{
document.write("<META HTTP-EQUIV='Refresh' CONTENT='06; URL=http://www.example.com'>");
}
// ]]></script>
</body>
</html>
can anyone point me in the right direction? I can get function onload to work since its a popup window.
<html>
<head>
<script src="http://gd.geobytes.com/Gd?pages=US&ext=html&after=-1" type="text/javascript"></script>
<script>
function after_load() {
if (typeof (sGeobytesLocationCode) != "undefined" && sGeobytesLocationCode.indexOf('US') == 0)
{
document.write("<META HTTP-EQUIV='Refresh' CONTENT='06; URL=http://www.example.com'>");
}
}
</script>
</head>
<body onload="after_load()" style="background: transparent; border: none;">
</body>
</html>
The load event fires when all the content on your page fully loads including the DOM (document object model) content, asynchronous javascript, frames and images.
You can also use the DOMContentLoaded event instead (faster) when the initial HTML document has been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading.
<script>
// For legacy browsers use this instead: window.onload = function()
window.addEventListener('load', function () {
if(typeof(sGeobytesLocationCode)!="undefined" && sGeobytesLocationCode.indexOf('US')==0)
{
document.write("<META HTTP-EQUIV='Refresh' CONTENT='06; URL=http://www.example.com'>");
}
}, false);
</script>
The right answer...
The question is a bit misleading which seems to have started people down the wrong path. There is no need for a document onload handler. The code below works as expected without one.
This is an example I took from the GeoBytes site and reworked. The meta tag redirect part also works, but I've disabled it in the code posted here. The aim of the code is to automatically redirect users to a country specific page.
The GeoBytes site has many free web services and is worth a look.
Run the snippet to test:
<html>
<head>
<script src="http://gd.geobytes.com/Gd?pages=US&ext=html&after=-1" type="text/javascript"></script>
<script type="text/javascript">
// DISABLED: Redirect vistors from USA to www.whitehouse.gov by inserting a meta tag
if(typeof(sGeobytesLocationCode)!="undefined" && sGeobytesLocationCode.indexOf('US')==0) {
// document.write("<META HTTP-EQUIV='Refresh' CONTENT='0; URL=https:\\www.whitehouse.gov'>");
}
</script>
</head>
<body>
GeoBytes API
<p>
<script type="text/javascript">
document.write('sGeobytesLocationCode = ' + sGeobytesLocationCode );
</script>
</body>
</html>
Consider the following script (Also at http://jsbin.com/yegike/1/). If I try to create variable map before including the google maps link, I get a ReferenceError: google is not defined error. Without moving the link before the script, is it possible to eliminate this error? Even if the answer is "no", I would appreciate an explanation on what is happening.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Testing</title>
<link href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/ui-lightness/jquery-ui.css" type="text/css" rel="stylesheet" />
<style type="text/css">
</style>
</head>
<body>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.js" type="text/javascript"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.js" type="text/javascript"></script>
<!-- <script type="text/javascript" src="//maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places"></script> -->
<script>
(function($){
var map = new google.maps.LatLng(47.64864, -122.348927);
}(jQuery));
</script>
<script type="text/javascript" src="//maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places"></script>
</body>
</html>
You're trying to call a method named maps within the google namespace which is defined in your commented out script. The solution for this is to use the jQuery.ready method to execute your code when the page has been loaded (including your script include at the bottom of the page). Wrap your function within this and you should be good to go:
$( document ).ready(function() {
var map = new google.maps.LatLng(47.64864, -122.348927);
});
For more information about ready you can check out the always useful jQuery API:
http://api.jquery.com/ready/
Perhaps try this which waits until the page is loaded and if it takes google a while to load, then it will try again:
var map;
function makeMap() {
if (google && google.maps) { // google loaded?
map = new google.maps.LatLng(47.64864, -122.348927);
return;
}
setTimeout(makeMap,200); // try again
}
$(function(){ // on page load instead of Immediately-Invoked Function Expression (IIFE)
makeMap();
});
Scenario: You have a script that users can place on their website and when they click on it, it redirects to my website then calls a function only after they have successfully been redirected to my website and the function is part of my website, so there shouldn't be any problem with the same origin security policy.
So is the scenario possible?
EDIT
Ok now that I know that it can be done, I run into a pickle doing this.
function main(){
$(document).ready(function($){
window.location.href = 'http://www.example.com/michael';
theclient.chat();
});
}
I want theclient.chat() to be called after example.com/michael is loaded but it's not working.
UPDATE 2
function main(){
window.location.href = 'http://www.reflap.com/michaelnana';
$(document).ready(function(){
theclient.chat();
});
}
So will this work?
You have to call that function on your own site in the following block:
Source page:
function main(){
window.location.href = 'http://www.example.com/michael';
}
Target page (http://www.example.com/michael):
$(document).ready(function(){
theclient.chat();
});
To be clear: this will be called, if you type the URL of the page too and not only after a redirect.
You should add a URL parameter when you do the redirect, if you want to call it only after a redirect.
UPDATE:
You cannot call a function on the original page, after the redirect has been done.
On your target page, if you include the jQuery library, use this code:
$(document).ready(function(){
theclient.chat();
});
The ready() method makes sure the page (http://www.reflap.com/michaelnana) is rendered before running your JavaScript.
I've included 3 sample files that should serve as a skeleton for what you're trying to do.
www.external-site.com/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>3rd Party Page</title>
</head>
<body>
<script type="text/javascript"
src="http://www.example.com/michael/embed.js">
</script>
</body>
</html>
www.example.com/michael/embed.js
// load jQuery, keep it in our scope
// I'll not explain how this works but if you're making an embed
// script for other sites, you must make sure to encapsulate all
// your dependencies such as jQuery.
loadDependencies(function($) {
// document onload
$(function() {
// create a button that redirects to example.com/michael
var button = $('<a>').text('click me').click(function() {
window.location.href = 'http://www.example.com/micahel';
});
// insert that button after this script tag
var src = 'http://www.example.com/michael/embjed.js';
$('script[src="' + src + '"]').after(button);
});
});
www.example.com/michael/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>Landing Page</title>
<script type="text/javascript" src="jQuery.js"></script>
<script type="text/javascript" src="theClient.js"></script>
<script type="text/javascript">
$(function() {
// all visitors to this page will trigger this call, not just
// the ones who came from the script embed. If you want to
// differentiate I'd recommened adding a query paremeter to
// the redirect and reading it there.
theClient.chat();
});
</script>
</head>
<body>
</body>
</html>