How to call JavaScript inside a WebBrowser control? - javascript

I want to call the JavaScript function "Goto" like this:
javascript:Goto('DM_NEW_OBJECT.ASPX?DM_CAT_ID=2063&DM_PARENT_ID=2217&INPUTSELECTION=&DM_OBJECT_ID=0&PACK_ID=0&CASE_ID=0&mode=0&SITE=Default');
the function is located in the DefaultGeneral.aspx page, and I need to call it from within a WebBrowser control:
webBrowser1.Navigate("http://mySite/DefaultGeneral.aspx");
Do you have any idea?

Since you are using a WebBrowser object, I will assume that this is actually a Windows forms question and not an asp.net question.
You should look at the InvokeScript function of the web browser.
Let's say your webpage has the following function:
WITHOUT PARAMETERS:
<script type="text/javascript">
// Function Without Parameters
function JavaScriptFunctionWithoutParameters() {
outputID.innerHTML = "JavaScript function called!";
}
</script>
You would want to call it the following way:
this.webBrowser.InvokeScript("JavaScriptFunctionWithoutParameters");
WITH PARAMETERS:
<script type="text/javascript">
// Function With Parameters
function Goto(someParameter) {
outputID.innerHTML = someParameter;
}
</script>
You would call it like this:
object[] param = new object[1];
param [0] = "DM_NEW_OBJECT.ASPX?DM_CAT_ID=2063&DM_PARENT_ID=2217&INPUTSELECTION=&DM_OBJECT_ID=0&PACK_ID=0&CASE_ID=0&mode=0&SITE=Default";
this.webBrowser1.Document.InvokeScript("Goto", param );

In C# you have to do something like this:
Page.ClientScript.RegisterStartupScript(this.GetType(),"CallMyFunction","MyFunction()",true);
Or this:
ClientScript.RegisterStartupScript(GetType(),"hwa","alert('Hello World');",true);
Check out this doc...
http://msdn.microsoft.com/en-us/library/system.web.ui.page.clientscript(v=vs.110).aspx

Maybe ... put the javascript:Goto into the
<body onload="">
... inside the quotes.

Related

how to call a javascript function within a function

I have javascript file called screener.js
function ScreenerPage() {
function onScreenListChange() {
do stuff
};
}
from the index.html file I include the javascript file like this:
<script type="text/javascript" src="./js/screener.js"></script>
Then later in the head section of index.html I instantiate the screenerPage object like this:
<script type="text/javascript">
$(document).ready(function () {
screenerPage = new ScreenerPage();
}
</script>
Then down in the body section there is a select with onchange event that calls
<select id="screenList" onchange="screenerPage.onScreenListChange()">
but the browser shows error:
Uncaught TypeError: screenerPage.onScreenListChange is not a function
What am I doing wrong?
The way javascript works is it has objects and the way of which they are created matter!
Here is the way i've found that works for this kind of thing
screener.js
var ScreenerPage = function() {
this.onScreenListChange = function() {
//do stuff
console.log("test")
}
}
Later on
var a = new ScreenerPage();
a.onScreenListChange();
if you have any questions on how it works feel free to try to message me!
The reason it does not work is that you're having a scope issue.
The function ScreenerPage is defined in the global scope, meaning it is accessible anywhere. Now inside that function you define a local function called onScreenListChange.
You are able to do that, but that function only exists within the scope of the function you defined it in.
When I look at your function, I think you want to use classes. A class is a single name that can have multiple variables / methods to do a specific task.
class ScreenerPage {
constructor(text){
this.onScreenListChange(text) // Call this "method" on object creation.
}
onScreenListChange(text) {
console.log(text ? text : 'do stuff');
};
}
var a = new ScreenerPage('hi'); // now watch your console log.
a.onScreenListChange();

Call a javascript handler with parameters

I have a method that calls another method (on ajax load, but that's irrelevant for this question). I'd like to pass parameters to this method. How is this possible?
The below page should scroll to id 25 on button click (the scrollable area is dynamically added in codebehind. this is just an example of what I'm attempting to accomplish)
JS
<%# Page Language="C#" Inherits="APTEIT.scrolltest" %>
<html>
<head>
</head>
<body>
<script type="text/javascript">
function callHandler(handler) {
handler();
}
function scroll(id) {
alert("scrolling");
$("#divy").scrollTop($("#"+id).position().top);
}
</script>
<input type="button" value="scroll" onclick='var scroll={param1: "25"};callHandler(scroll)' />
</body>
</html>
You don't seem to pass the parameter into the handler in the callHandler method - instead, you try to invoke the scroll parameter (which is var scroll={param1: "25"}) as a function.
You use the same name scroll both for a config object and a function name. Please use different names :) Moreover, your declared and used function signatures do not agree. The scroll function accepts a string id while you are trying to pass in an object instead.
Unless I misunderstood, if handler is a function then pass arguments to it like any normal scenario.
function callHandler(handler){
var passme = "test";
handler(passme);
}
Update 1
I think what you might be able to do in this instance is the use the this keyword in the context of the input element. What this will ultimately do in your instance is replace id with this. This will also remove the additional select. Try this:
function callHandler(handler)
{
handler();
}
function scroll()
{
$("#divy").scrollTop($(this).position().top);
}
this might not work, as I'm not sure if the context will be that of input, or callHandler, give it a go! :)
Original
You should just be able to pass the parameters into the handler like so:
function callHandler(handler)
{
var param = 'Hello world';
handler(param);
}
callHandler(function(phrase)
{
alert(phrase);
});
put the parameters into an object like so:
var handler = {
param1: 'val1',
param2: 'val2' //ect...
}
handler(handler);
EDIT:
changing:
$("#divy").scrollTop($("#"+id).position().top);
to:
$("#divy").scrollTop($("#"+id.param1).position().top);
should work for your edited question.

How to use <a4j:jsFunction><a4j:actionparam>

I'm trying to use:
<script type="text/javascript">
function myfunc() {
var param = 4;
alert("OK");
}
</script>
I call the function like this:
<a4j:jsFunction name="myfunc">
<a4j:actionparam name="param" assignTo="#{MyBean.myfield}"/>
</a4j:jsFunction>
But it does not work. In what may be the reason?
You misunderstood the purpose of <a4j:jsFunction>. It autogenerates a JavaScript function which you can then call from any JavaScript code in your view.
Your example,
<a4j:jsFunction name="myfunc">
<a4j:actionparam name="param" assignTo="#{MyBean.myfield}"/>
</a4j:jsFunction>
will autogenerate the following function
<script>
function myfunc(param) {
// Here some specific JSF Ajax script which assigns "param"
// to a managed bean property #{MyBean.myfield}
}
</script>
You do not need to define it yourself. You only need to invoke it yourself from some JavaScript code elsewhere. For example,
<span onclick="myfunc(4)">click here to set 4 in MyBean.myfield</span>
or
<script>
function someOtherFunction() {
var param = 4;
myfunc(param);
}
</script>
which is in turn to be used like
<span onclick="someOtherFunction()">click here to call someOtherFunction() which will in turn set 4 in MyBean.myfield</span>
See also:
<a4j:jsFunction> component reference
<a4j:jsFunction> showcase example
<a4j:jsFunction
is not used to call an function, it is used to define an function.
So, if MyBean.myfield is an int-field you can set the value 2 using:
<script>myfunc(2);</sript>
There's a bunch of different ways to call that function.
Two you will find particularly useful are:
This:
<body onload="myfunc();">
Example: http://ultimatemmo.webege.com/Test.html
and this:
Click here to execute function
Example: http://ultimatemmo.webege.com/Test2.html
Edit: added examples.
According you snippet of code, you have never called your function. Add myfunc(); within your script tag.

Is there a way to call a Javascript class method from ExternalInterface?

I can call JS functions with ExternalInterface.call('func_name',.args). OK
But what if I would like to call a js class instance method instead?
ExternalInterface.call('obj.method_name',.args) //this seems not to work
Is there any way of doing it?
It was only a matter of scope. You must instantiated the swf object outside the js class. Then I can reference it in ExternalInterface.call().
window.addEvent('domready',function(){
swf = new Swiff('../files/swf/italy.swf',{
id:'italy',
container:'italy-flash',
width:280,
height:323,
params:{
bgcolor:'#ffffff',
wmode:'opaque',
allowScriptAccess:'always'
}
});
rm = new RelessersManager('regions');
});
Now from the swf I can call the rm methods. :) (.call('rm.method_name',...params))
Previously, I built the swf inside rm, so there was no way to reference rm from the swf.
You can call a JavaScript-Method with ExternalInterface.
Be sure, you have included your JavaScript-Files or you have written your JavaScript-Function inside your index.template.html-file, this could looks like:
<script type="text/javascript" src="./lib/file.js"></script>
<script type="text/javascript">
function doSomtething() {
alert("Something is done");
}
</script>
If you want to call the function "doSomething()" you can do this with the following code:
ExternalInterface.call("doSomething");
If you want to send some parameter and your JavaScript Function is defined like this:
<script type="text/javascript">
function doSomtething(param1, param2) {
alert("Something is done");
}
</script>
You can call it with this statement:
ExternalInterface.call("doSomething", param1, param2);
If this is not working, check your JavaScript-Functions inside your html-file.
You have posted the following statement:
ExternalInterface.call('obj.method_name',.args)
Are you sure you want to send ".args" instead of "args"?
I hope this will help you a little bit.

Debugging ActionScript in Browser

I am trying to implement following:
How can I start a flash video from javascript?
However I am unable to call method from Javascript. The trace message I wrote within AS file is not able to see while calling file within browser.
How can I test whether my JS function is calling AS method or not?
The FlashBug addon for Firefox lets you see Flash trace outputs in your browser.
here is the code which I am using:
import flash.external.*;
var flashFunction:String =
"jsstopMainVideo"; var
realFunction:Function = stopMainVideo;
function stopMainVideo(){
trace("called from javascript");
//flvPlayer.stop(); }
//stopMainVideo();
var wasSuccessful:Boolean =
ExternalInterface.addCallback(flashFunction,
null, realFunction);
In JS I am doing:
var me = null; function
getID( swfID ){
if(navigator.appName.indexOf("Microsoft")
!= -1){
me = window[swfID];
}else{
me = document[swfID];
} } getID("signupVideoVideo");
me.jsstopMainVideo();
I am getting JS error that function me.jsstopMainVideo() is not a function
The simplest method is to create a javascript function that only has an alert function inside.
try calling it, you either get the pop-up or you don't.
edit:
Alert is a javascript command, but you can call it directly from flash using external interface call.
as:
var call_java:uint;
call_java = ExternalInterface.call('alert','!!!');
or... call the alert from a function
AS:
var call_java:uint;
call_java = ExternalInterface.call('myFunction','!!!');
javascript:
funciton myFunction(val)
{
alert(val);
}
Just check this example http://www.adobe.com/livedocs/flash/9.0/ActionScriptLangRefV3/flash/external/ExternalInterface.html , maybe you forgot something

Categories

Resources