We Keep Coding

UWP: webview does not display page using navigateToString method

I am trying to use webview element in a universal app using javascript. My aim is to browse some websites adding some content of my own to its html document.
First, I set src attribute of webview to www.example.com and it browses the site. This was just to make sure the webview is capable of browsing the site.
Next, I tried getting the html and load it to webview using navigateToString method like this:
$.get(url, function (data) {
webView.navigateToString(data);
});
This causes the page to be loaded out of shape (aperarently some .js or .css files are not loaded or blocked from running), or it isn't even loaded.
I wonder what is the difference loading the page by its url and loading its html by manually like this. And is there a workaround I can overcome this problem.
Note: I'm new at both js and html.

A web page is usually not made of a single HTML file. In order to make it work, you will have to retrieve not only the HTML but also the javascript and the css files.
This can be a tedious work.
If you are trying to open something from the web, the easiest way is to perform a regular navigate() which will take the URI as parameter and perform a "full" browse (as the browser will do). The retrieval/loading of the CSS/JS will be done for you.
If you want to open a local page (local to your application), navigateToString() is a good path but you will have to host locally all the page dependencies (css/js fiels) or embed all the style and code in the HTML page itself.

How to load content with AJAX that contains a script?

So I am working on a website trying to use jquery/ajax to load content into the home page. Current test site is [http://newconstructionflorida.net] the home & about me page work without any issue, however the property search link does not load.
The content/property-search.php file I am trying to load contains a script:
<script src="//idx.diversesolutions.com/scripts/controls/Remote-Frame.aspx?MasterAccountID=115580&SearchSetupID=143&LinkID=0&Height=2000"></script>
What am I missing to be able to get this script to execute when loaded via AJAX? If I insert it into the home page directly it works without issue so it must be related to the jquery/ajax.

Loading .js scripts via ajax is not a good idea since .js scripts functionality is always bound to the loaded HTML DOM and my not work properly if loaded asynchronously via ajax after the DOM is fully loaded.
What you can do is loading the script once the ajax response is completely received using javascript functions like getScript() or .append().
See this answer here on how to use javascript to append an external script to your page:

How do I execute some javascript after a file is downloaded?

I have a page with a link to a file. When the link is clicked I use the code below to show a loading message:
$('#TerritoriesToExcelLink').click(function() {
$('#TerritoriesToExcelLoading').show();
window.location.href = $(this).attr('href');
});
I'd like to hide the message once the file is downloaded and the save dialog pops up in the browser.
I've tried adding some code that fires on ready() but that seems to just run straight away (presumably since the page is already loaded even if the file isn't) so the loading message never gets displayed.
How can I hide the loading message once the file has been completely downloaded?

Have your server send a random cookie that you specify from your client-side code with your download in the HTTP headers. Poll in your Javascript to check for the presence of the cookie. This should tell you when the browser has your file.

If you aren't opposed to using flash...
You could create an invisible flash object on the page, then when you click the download link, you could trigger flash to download the file, then handle the flash download complete event and use the ExternalInterface API to raise the event in javascript.

This is not possible to do with front end javascript, there is no way for it to retrieve the progress of a download and it doesn't have any events relating to downloads.
I don't think tracking the progress can be done with server side languages either.

event after load of multiple js and html files into dom dynamically

I have a tabbed panel where onclick on a specific tab i need to load three js files and a html file into current DOM and execute a method related to those js and html file.
The html file contains templates and need to be loaded into a hidden iframe.
I am able to load the same by appending the respective tags to the body but i need to execute a function after all the files are loaded.
How to get the event after all the files being loaded.?
--------------- New problem ----------------------
Im geting the event successfully after loading the files.
I have below problem.
I have a html file im loading as above and giving the content to a dynamically created iframe as follows
content = document.createElement("iframe");
content.style.display = "none";
content.src = 'data:text/html;charset=utf-8,' + encodeURI(responseText);
My base protocol is https. When the protocol is http im getting no error. Now im getting the following error.
The frame requesting access has a protocol of '', the frame being accessed has a protocol of 'https'. Protocols must match.
Please help.

You hinted at the solution in your last sentence:
Trigger an event!
Register a handler that will wait for your 4 custom events, keep track of which were already received via a global array and execute your function when all required events were triggered.
Of course you will trigger() a custom event at the last line of every one of your asynchronously loaded files.

Dynamically load & parse local HTML from within HTML?

A bit of an unusual setup:
I'm writing in an html page that in turn loads another html page, parses it, analyzes it, and displays information about it.
The parsing is fairly easy using jQuery. I just need to figure out how to load the external page - that is, when page A is displayed in the browser, it needs to load page B, analyze page B, and display information about page B.
Both pages are local (not served via a web server).
Both load and ajax from jQuery run into the cross-origin permission issue:
XMLHttpRequest cannot load file://localhost/Users/me/test.html. Origin null is not allowed by Access-Control-Allow-Origin.
I can load the page with a script tag, but then I don't know how to access it so I can parse it:
<script type="text/html" src="test.html"></script>
Any ideas?

Have you thought about using JavaScript/jQuery to create an iframe? (You can use CSS to make the iframe hidden to the end user.) Then you can listen for the iframe's onload event, and parse it through the iframe's contentDocument element (I believe).