XAML page Webview control: Injecting JavaScript

Question

I have a XAML page with a webview control on it. The webview is loading content from a remote server. Once the webview receives the content and LoadCompleted
event is fired,  I can access the HTML content in the LoadCompleted event handler. At this point, I would like to inject and execute a javascript function(this function is not in the loaded HTML) using the "invokeScript" method of webview. In the javascript function I would like to modify the DOM by adding a new Input element ( text field ) and set the focus on to this element. The CSS properties of the element will be set such that the user will not be able to see the text box.<o:p></o:p>

So, the question is, can I alter the DOM of the remote content from javascript in the LoadCompleted event handler? <o:p></o:p>

Answer 1

Hi,

Please check whether or not this helps: http://stackoverflow.com/questions/9521957/how-to-add-html-elements-to-a-cocoa-webview

http://stackoverflow.com/questions/5311298/webview-insert-modify-content-dynamically

Answer 2

SilentJealosy, while I appreciate a reply, why are you pointing me to ways to modify an iOS control/app (webkit)?  This is not an iOS application I am building but rather a Windows 8 application using the WinRT webcontrol and IE10.

So my question is still open: Can I alter the DOM of the remote content from javascript in the LoadCompleted event handler of a Windows 8 WinRT application using the WebControl?

Answer 3

Hi TDOGDFW,

Sorry for the late response.

Yes, you can alter the dom of the remote content by calling InvokeScript in LoadCompleted event handler.

For sample code, please download the C# version of the XAML WebView control sample. Open Scenario5.xaml.cs and replace the LoadedCompleted handler with the following code.

        void WebView5_LoadCompleted(object sender, NavigationEventArgs e)
        {
            //List<Uri> allowedUris = new List<Uri>();
            //allowedUris.Add(new Uri("http://kexp.org/Playlist"));
            //WebView5.AllowedScriptNotifyUris = allowedUris;
            //WebView5.ScriptNotify += WebView5_ScriptNotify;
            string script = @"var textbox=document.createElement('input');document.body.appendChild(textbox);textbox.focus();";
            string[] args = { script };
            string foo = WebView5.InvokeScript("eval", args);
            //rootPage.NotifyUser(String.Format("Title is: {0}", foo), NotifyType.StatusMessage);
        }

Then run this sample and select scenario 5, you will see the TextBox gets added and focus right after document loaded.

This question is not much related to this forum. If you have any further questions, I suggest to posting at the following forums to get timely answers,  

For more questions about WebView control, please post at Building Windows Store apps with C# or VB Forum

For more questions about Javascript, please post at ASP.NET forum or Internet Explorer Web Development forum

Thanks for your understanding and support!

Best regards,

---

Min Zhu
MSDN Community Support | Feedback to us
Develop and promote your apps in Windows Store
Please remember to mark the replies as answers if they help and unmark them if they provide no help.

Answer 4

Thank you!  This is what I was looking for!