Windows Phone 8 app, WebBrowser control. I load a chunk of HTML via NavigateToString (after setting IsScriptEnabled=true). Some time later (long after it's loaded), I'm invoking some JavaScript on the page with InvokeScript.
When I invoke a JavaScript function that's defined inline inside a <script> element, it works as expected. When I invoke one that's defined in an external JS file, it doesn't, and an exception from HRESULT 0x80020006 ("name not found") is thrown.
The external script file is loaded from my app package. In the HTML string, there's a <base> element which contains a file:// URL to the package's folder (retrieved via Package::Current->InstalledLocation), and the <script> element contains just the file name. There are also styles and images in that folder - they load fine.
The HTML has no DOCTYPE and no xmlns - I know those things can sometimes throw JavaScript off.
The external script file is valid - it came straight from Android where it worked on the respective WebView control. The function I'm trying to invoke is empty anyway, to be on the safe side, JavaScript syntax-wise.
This could in theory be some kind of a cross-domain scripting issue. Technically, the script comes from a file:// URL while the page itself comes from no URL at all. Some piece of system code that makes sure no fishy script is called could've gotten in the way.
Found one workaround: load the external script file into a string on startup, once the HTML is loaded (LoadCompleted fires), feed it to the document using JavaScript eval.
Here is example of how to inject some script dynamically
Browser.InvokeScript("eval", new string[] { FileUtils.ReadFileContent("app/www/js/console.js") });
Where ReadFileContent could be defined as following
https://github.com/sgrebnov/IeMobileDebugger/blob/master/Libraries/Support/FileUtils.cs
Full example
https://github.com/sgrebnov/IeMobileDebugger/blob/master/Libraries/IE.Debug.Core/WebPageDebugger.cs
PS. instead of reading script from file you can pass hardcoded string, etc
Are you sure that your script is being loaded? One thing you can do is tuck an alert in there to make sure it is being loaded. My suspicion is that it isn't being loaded.
Any time I have run into this before that has been the case although admittedly I haven't loaded a JS file from Isolated Storage before.
Related
An exception breakpoint once led me to a render function generated by the Vue template compiler for one of my Vue components.
This striked me as a "Hey, I now understand how this template system works!", but I didn't pay attention to where that was in the webpack tree.
Now I'd like to inspect the code for other components and may be set a breakpoint here and there, but when I browse the active javascript sources in the browser debugger pane, I can't find any of this generated code.
It looks like the compiled render functions can be found in the sources tree under the . folder of webpack://. It can be a bit tricky to find the right one though because there are multiple files for each .vue file. The other files will contain other bits of the component. The file containing the render function should be pretty obvious when you find it, it should start var render = function() {. For example, in one of my test applications I can see the render function for app.vue at webpack:///./src/app.vue?91e4, though that last part will vary.
If you want to insert a breakpoint for your own component then you can sneak it in via a method. This can also be a quick way to find the right file.
Within the template, make a call to a method, I've called it breakpoint:
{{ breakpoint() }}
Then in the method:
breakpoint () {
debugger
return ''
}
You can then walk one level up the stack to see the compiled render function.
Of course you don't necessarily have to use a debugger statement for this. You could just set a browser breakpoint in a suitable method (or introduce one if one doesn't already exist). So long as the method is called within the template it should give you access to the compiled render function.
To set a breakpoint that way you should just need to navigate to the relevant .vue file in the webpack:// section of the sources tree. That file is usually easy to find directly under the webpack:// heading.
Update:
Once you've found the file containing the render function using a breakpoint you can then find the file in the sources tree using 'Reveal in sidebar':
I have a very, very simple set of Vue components that all work. These are a simple addition on top of an existing C# app.
At the moment, these are .html files (brought into the app inside <script> tags) and .js files loaded by reference.
These all work, are very light weight, and I love it.
Now I want to compile the HTML for each component into a Vue render function, and the .js into one minified .js file.
The .js to .min.js is pretty standard, but I cannot figure out how to get the HTML to compile into the Vue render function. Everything I've found involves a LOT of overhead and running a web server which seems a massive overkill for an html->script transform, and I don't need a full web application spun up. I only need my existing, simple templates transformed to something more friendly for production than my long-form html templates getting dumped to the page.
I'm not entirely opposed to turning the .html+.js into .vue files, but just doing that doesn't seem to overcome my issue.
I cannot figure out how to get the HTML to compile into the Vue render function
To generate a render function from a Vue template string (e.g., read from an HTML file), you could use vue-template-compiler like this:
const compiler = require('vue-template-compiler')
const output = compiler.compile('<div>{{msg}}</div>')
console.log(output) // => { render: "with(this){return _c('div',[_v(_s(msg))])}" }
Everything I've found involves a LOT of overhead and running a web server which seems a massive overkill for an html->script transform
The "web server" you mention is provided by Webpack CLI, and is intended to faciliate development. You don't need to use the dev server. The article indeed describes several steps in manually setting up a project to build Vue single-file-components, but a simpler method is to use Vue CLI to automatically scaffold such a project.
I'm trying to understand the usage and limitations of server side rendering with vuejs when using aspnet core.
I used this starter kit for aspnet core and vuejs to setup a simple vue site, which is running based on the code here: https://github.com/selaromdotnet/aspnet-vue-ssr-test/tree/master
I then modified the project to update the aspnet-prerendering and added vue-server-renderer, compiling a hodgepodge of sources to cobble together this update: https://github.com/selaromdotnet/aspnet-vue-ssr-test/tree/ssr
If I run this project, the site appears to load fine, and if I turn off the javascript in the browser, I can see that it does appear that the server-side rendering executed and populated the html result:
however, because JavaScript is disabled, the content isn't moved into the dom as it looks like it is trying to...
My understanding of server-side rendering is that it would populate the html entirely and serve a completed page to the user, so that even if JS was disabled, they'd at least be able to see the page (specifically for SEO purposes). Am I incorrect?
Now I believe modern search engines will execute simple scripts like this to get the content, but I still don't want a blank page rendered if js is disabled...
Is this a limitation of server-side rendering, or perhaps specifically ssr with vue and/or aspnet core?
or am I just missing a step somewhere?
Edit: more information
I looked at the source code for what I believe is the method that prerenders the section here: https://github.com/aspnet/JavaScriptServices/blob/dev/src/Microsoft.AspNetCore.SpaServices/Prerendering/PrerenderTagHelper.cs
The line
output.Content.SetHtmlContent(result.Html);
has a null value for result.Html. However, when I manually edit this value to put a test value, it also doesn't render to the output html, and the app div tag is still empty...
If I'm doing something wrong to populate the result.Html value with the expected output, that's one thing, and I would appreciate some help in doing that, especially since the output html appears to be found, since it's in the script that immediately follows...
However, even if I were to populate it, it appears it's being skipped, as evidenced by me manually changing the value. is this a bug in the code or am I doing somethigng wrong, or perhaps both?
As you correctly noticed, for your project, result.Html inside the tag helper is null. So that line cannot be the location where the output is being generated. Since the HTML output from your prerendering script also does not include a script tag, it is clear that something has to generate that. The only other line that could possible do this is the following from the PrerenderTagHelper:
output.PostElement.SetHtmlContent($"<script>{globalsScript}</script>");
That would fit the observed output, so we should figure out where the globalsScript comes from.
If you look at the PrerenderTagHelper implementation, you can see that it will call Prerenderer.RenderToString which returns a RenderToStringResult. This result object is deserialized from JSON after calling your Node script.
So there are two properties of interest here: Html, and Globals. The former is responsible for containing the HTML output that finally gets rendered inside the tag helper. The latter is a JSON object containing additional global variables that should be set for the client side. These are what will be rendered inside that script tag.
If you look at the rendered HTML from your project, you can see that there are two globals: window.html and window.__INITIAL_STATE__. So these two are set somewhere in your code, although html shouldn’t be a global.
The culprit is the renderOnServer.js file:
vue_renderer.renderToString(context, (err, _html) => {
if (err) { reject(err.message) }
resolve({
globals: {
html: _html,
__INITIAL_STATE__: context.state
}
})
})
As you can see, this will resolve the result containing just a globals object with both html and __INITIAL_STATE__ properties. That’s what gets rendered inside of the script tag.
But what you want to do instead is have html not as part of globals but on the layer above, so that it gets deserialized into the RenderToStringResult.Html property:
resolve({
html: _html,
globals: {
__INITIAL_STATE__: context.state
}
})
If you do it like that, your project will properly perform server-side rendering, without requiring JavaScript for the initial view.
I have to download CSS file and apply style sheet to my app. I downloaded this file at the local folder and referenced it as
style.href = "ms-appdata:///local/css//custom.css";
and appended to head as
document.getElementsByTagName('head')[0].appendChild(style);
after document onready event.
Seems it has no effect (but I can see this element in the dom browser).
So is there any restriction for css source: app package, local folder? May be this impossible to reference downloaded CSS due to MS limitations? Or may be I'm doing something wrong? Any suggestions?
Do keep in mind, however, that you can access the document.styleSheets collection and list, add, or remove CSS rules dynamically from JavaScript. You can access the individual rules themselves through the DOM using statements like document.styleSheets[0].cssRules[0].style.color = "red" or you if you've fetched yourself some custom CSS text (dynamically from your other CSS file online) you can add its styles to one of your active style sheets using something like document.styleSheets[0].cssText = "{my CSS code}". Do be sure that you're manipulating the right style sheet by checking the document.styleSheets[0].href.
I think you're out of luck trying to head down that path.
Note that, for security reasons, you cannot navigate to
HTML you have downloaded to this location and you cannot
run any executable or potentially executable code, such
as script or CSS.
Source: http://msdn.microsoft.com/en-us/library/windows/apps/hh781215
Also, this blog post seems possibly helpful: http://palermo4.com/post/How-to-Use-IFrames-in-WinRT-Apps.aspx
Using PhantomJS, I'd like to inject some JS as if there was an extra <script> tag before any other <script> tags. This is because the scripts on the page use some functions that PhantomJS does not have, namely Function.prototype.bind and window.webkitRequestAnimationFrame. I have a JS file with custom implementations of the two and I'd like PhantomJS to use them when running the scripts on the page.
The difficulty is that if I do page.injectJs before page.open, the script is injected into an empty page and is not carried over to the page being opened.
Alternatively, if I do page.injectJs after page.open, it's too late as the JavaScript errors (undefined functions) have already occurred.
I've found a way that appears to work, but is obviously a hack:
page.onResourceReceived = function() {
page.injectJs('phantom-hacks.js')
};
This injects it many times (twice for each resource, apparently), but that's okay because my script is idempotent. However, I'd like to know the proper way to do this: inject it only once and before any scripts on the page are run.
Thanks :)
I don't think there's a "proper" way to inject such script other than hooking to events.
I've spent half a year working massively with PhantomJs and found no way to inject before all the errors start happening but after the page finished loading.
I would try to go through onInitialized, onLoadStarted, onLoadFinished. Inside the hooks I would call to page.evaluate() which would just modify DOM to have this extra whatever place you like.
I think one of them (the hooks) should give you the right timing you want.
Cheers