Welcome Guest Search | Active Topics | Sign In | Register

Modify web page before rendering on EO.WebBrowser Options
Khoa
Posted: Saturday, November 8, 2014 1:53:46 AM
Rank: Advanced Member
Groups: Member

Joined: 9/3/2014
Posts: 68
Hi,

I would like to modify the web page before it shows on EO.WebBrowser. For example, WebView.LoadUrl("www.google.com") will load Google page, but I want to remove Google logo. So when navigating the Google.com page, the web browser shows only the search textbox. I think JavaScript can do that after the page is fully loaded, but I don't want the screen shows the logo then quickly hides it. It is better to process before the page shows up on the screen.

Thanks.
eo_support
Posted: Saturday, November 8, 2014 10:32:29 AM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,080
Hi,

You won't be able to do that. Like all modern browser engine, EO.WebBrowser renders the page as it loads. So it will try to render as much as it can even before the full page is loaded. As such a point after loading and before rendering does not even exist for most pages. For your objective, there are a number of options you can explore, one is to use a custom resource handler or handle BeforeRequestLoad event to filter out certain request; Another is to use WebView.JSInitCode to inject your own JavaScript code before everything else. This way you might be able to catch something in the JavaScript code you injected and act accordingly.

Thanks!
Khoa
Posted: Sunday, November 9, 2014 11:50:17 PM
Rank: Advanced Member
Groups: Member

Joined: 9/3/2014
Posts: 68
Thank you for your reply. For that restriction, I am using a dirty way to run custom JavaScript after the web view is loaded completely. The code is:

private void webView_LoadCompleted(object sender, NavigationTaskEventArgs e)
{
webView.EvalScript(script);
}

The problem is the WebView's LoadCompleted event is only fired on the first URL changed. After that, if I click on any link to change to another URL, LoadCompleted event does not run. The event WebView's UrlChanged happens before the page is loaded. However, I want to capture after the page is fully loaded to run my custom JavaScript.

Thanks.

eo_support
Posted: Monday, November 10, 2014 9:22:32 AM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,080
Hi,

You need to use WebView.JSInitCode for such cases. LoadComplete event is only fired for request explicitly loaded by your code (for example, through LoadUrl).

Thanks!
Khoa
Posted: Wednesday, November 12, 2014 2:44:22 PM
Rank: Advanced Member
Groups: Member

Joined: 9/3/2014
Posts: 68
WebView.JSInitCode does not help to fire my JavaScript after the page is fully loaded. I use this following code for testing on WebView.JSInitCode:

jQuery(document).ready(function () {
alert("Page is loaded");
// Do custom work
});

This JavaScript happens only one time, any link after that does not fire it.

The question is how can I run my custom JavaScript after any page is fully loaded. I would like to add some additional features on any navigated URL on EO.WebBrowser.

Thanks.
eo_support
Posted: Wednesday, November 12, 2014 6:39:30 PM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,080
Hi,

JSInitCode is the only reliable way for you track the page's status. It will be fired for every navigation ---- as long as the current Url changes, it will be fired.

You can't use JQuery in your JSInitCode though. JSInitCode is called immediately after the window initialize, this is before everything else is loaded/called. So JQuery would not be available at that stage. However the DOM document object is available at that stage. So you can handle the document object's event to detect when it has finished loading.

Thanks
Khoa
Posted: Thursday, November 13, 2014 12:13:57 AM
Rank: Advanced Member
Groups: Member

Joined: 9/3/2014
Posts: 68
Thank you, that works for me. Based on your suggestion, here is the code:

window.onload = function () {
alert("Page is loaded");
// Do custom work
}

Thanks!
eo_support
Posted: Thursday, November 13, 2014 10:23:59 AM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,080
Thanks for the update. Glad to hear that it works for you!
Khoa
Posted: Friday, November 14, 2014 9:52:11 PM
Rank: Advanced Member
Groups: Member

Joined: 9/3/2014
Posts: 68
Hi,

There is a problem again with window.onload in WebView.JSInitCode. If I load a page which already has window.onload defined, the script inside window.onload of WebView.JSInitCode will skip to run.

Is there another better way to inject custom JavaScript before or after the page is loaded? JavaScript events/functions from WebView.JSInitCode may be overwritten by scripts from a website.

Thanks.
eo_support
Posted: Monday, November 17, 2014 11:55:15 AM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,080
This is a JavaScript issue similar to the one you previously had with JQuery that you need to resolve yourself. From our control point of view, we provide JSInitCode and ensure that it is called whenever a new page is loaded. We do not provide support on what you do inside JSInitCode and how to write specific JavaScript code to achieve your particular goal. So you will need to seek other channels as to why the JavaScript code is not work for you. Sorry about it!
Khoa
Posted: Thursday, November 20, 2014 12:24:29 PM
Rank: Advanced Member
Groups: Member

Joined: 9/3/2014
Posts: 68
Hi,

Sorry to come back again. I am playing with WebView.JSInitCode to define my own built-in JavaScript functions and objects. The function defined in JSInitCode is still available after the page is loaded. However, the object is not. Here is the code to present:

webView.JSInitCode = @"
var myObject = {
name: function () {}
age: function () {}
};
";

After the page is loaded, I check on DevTools and see myObject is undefined. How can I fix that problem?

Thank you.
eo_support
Posted: Thursday, November 20, 2014 12:30:33 PM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,080
Hi,

Please try to use something like this:

Code: JavaScript
window["your_var_name"] = ....;


When JSInitCode is evaluated, it is evaluated in a local context. So your myObject is actually a local variable in that context.

Thanks!
Khoa
Posted: Thursday, November 20, 2014 2:44:48 PM
Rank: Advanced Member
Groups: Member

Joined: 9/3/2014
Posts: 68
Thank you for your response. window["your_var_name"] = ....; is still not work on JsInitCode. After the page is loaded, window["your_var_name"] == undefined

How to declare a global variable like eoWebBrowser with its own functions. Those global variables will define my custom JavaScript API.

I see eoWebBrowser = window.eoWebBrowser = window.EO, I would like to do the same thing like that.

Thanks.
eo_support
Posted: Thursday, November 20, 2014 3:03:53 PM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,080
You need to trouble shoot this kind of problems yourself. You provide a piece of code for us to call and we call it ---- that's all. So we will only check whether JSInitCode has been called. And both our test and your previous rely indicated that is is indeed has been called. If it has been called, then you will need to work out the rest. We won't be guiding you on how to declare a global variable in JavaScript. You need to work out that part yourself. We answered your previous question because we wanted to point out to you that JSInitCode is evaluated in a local context. That information is specific to our product so we will provide it to you. Declaring a global variable in JavaScript on the other hand, is generic programming so we won't answer those. We deleted your previous reply because your question is already out of scope. In the future we will do so again without warning.

If you believe JSInitCode has not been called, or is not called sometimes, then you can isolate the problem into a test project and we will look further. See here for test project guidelines:

http://www.essentialobjects.com/forum/test_project.aspx

Thanks


You cannot post new topics in this forum.
You cannot reply to topics in this forum.
You cannot delete your posts in this forum.
You cannot edit your posts in this forum.
You cannot create polls in this forum.
You cannot vote in polls in this forum.