I’m new to the world of HTML. I wanted to create a local copy of the website I wanted to play around with by copying, pasting and saving the HTML source, as well as saving the webpage (with all the CSS, javascript, .ico elements etc.) and placing the HTML file in the same directory. However, when I opened up the HTML file, it was broken, and all styles were gone. Why is this so? Sincere apologies if this is a repeat, I didn’t really know what to search when looking for an answer. Thank you!
Without going into too much detail - Most modern websites are incredibly complex (JS, CDNs, webfonts, crossdomain content, etc etc) and are unlikely to look like anything reasonable when 'copy and pasted' to a local location.
If you're using Chrome I'd try the More Tools -> Save Page As feature which is slightly smarter about preserving dependencies, and even then it might not work very well.
Your best bet is to analyze the site inside of the browser, e.g. Chrome's Developer Tools and apply your learnings to a local stack you create from scratch.
It's kind of impossible to know what's going on without seeing the code or what (if any) errors are being produced by your browser.
I would suggest opening the JavaScript console in your browser to see if there are any errors. I could guess that the JS and CSS files are being referenced with an absolute path, and because you're serving them form the filesystem you need a relative path. But like I said, you're just going to have to debug this yourself.
The html file doesn't always contain everything it needs to render the page. Often css is stored in external files. The html file you copied should have a reference to the css that looks like.
<link rel="stylesheet" href="styles.css" >
It sounds like the stylesheets / scripts in the copied html are pointing to files that don't exist in your copied environment.
Could you post the way you have the files structured?
It could be that you have the filesystem set up differently than in the original webpage, ex/
wwwroot/
|-- index.html (which has stylesheet references to "css/styles.css")
|-- app.js
|-- styles.css
^ here the index.html file would be looking for styles.css in a folder called "css", but the styles.css file is not in that location.
(I'm aware this is not an actual answer, and may be more appropriate as a comment. I don't have enough reputation for commenting, so my apologies if I'm not following the StackOverflow ways of doing things.)
This could be the issue ideally because of the use of the external resources which are being used in that webpage and are not present on your local system.
You can check it from the developer console in chrome or whichever browser you are using.
Press F12 while viewing the webpage, this will open the Developer Tools
Click on the Console tab, here you can see all the errors and warnings that can cause any issue to that page.
Refer to the screenshot for the process:
You will be able to see errors in red color and warnings in orange color.
Related
While I admit this is a pretty obscure problem, I'm posting this partly in case it is driving others crazy (too), partly because it might have wider ramifications, and partly because it may be an issue with my project settings.
In NB-8.1 I have several angular modules for handling a configuration-editing app. Since last week I have been trying to figure out why the navigator pane doesn't populate with these files. When I click on the source, the Navigator pane doesn't update. If the pane is newly opened, it shows <No view available>. If it is correctly showing another file, it remains showing the old file and effectively ignores the new file.
After experimenting, I found that it is specific to any js file with a filename prefix of "config" - which in this case was all the files for this particular app (config-service.js, config-ctrl.js, etc). Renaming the files with a new prefix (eg, "konfig-ctrl.js" or "x-config-ctrl.js") solved the issue.
Is this widespread, or a problem only with this project? If the latter, what should I look for? Help or advice appreciated.
This looks like a bug to me. AFAIK NetBeans is handling JS files with the config in name as possible Karma configurations and maybe it (although I can't remember if Karma has to be enabled or where exactly does it look for these candidate files...) I'd suggest to report a bug against NetBeans https://netbeans.org/bugzilla/enter_bug.cgi?product=web (component HTML Project)
I get a very similiar problem. Any js file with "conf" in the name (anywhere in the name) cannot be Run as javascript from Netbeans. Right-click on the file and Run is deactivated. Once I change the name to something else, it works.
We have a Sitecore installation, and in our environment we are seeing 404 errors when our site is requesting the following files:
sptier0.js
sptier0-ajax.js
sptier0-window.js
My Google-fu doesn't turn up much.
What are these files, and what in their purpose?
Thanks!
I have found that these scripts are most probably related to SharePath performance monitoring tool of Correlsense (http://www.correlsense.com/product/).
I would start the investigation from viewing the html source in a browser, finding the place where the scripts are injected and then analyzing the sources in this area to find how does these links appear on the page.
These JavaScript files are indeed part of SharePath.
Specifically, they are added to existing application HTML pages in order to measure and report browser timing.
Your question, in addition to your comment to Vadim Dubovitsky, suggest that the tool was not properly uninstalled - the files were deleted, but they are still being referenced by (or injected into) the application code.
Disclaimer: I work at Correlsense.
I need to regularly send html pages to a client as standalone .html files with no external dependencies. The original pages are done with node.js and express and they contains several librairies such as High Charts.
I have done the preparation manually until now, this includes:
Transform all images into blobs
Copy all external .js and .cs inside the page
Minimize where possible (standards librairies such as jQuery or Bootstrap...)
The result is a single .html file that can be opened without an internet connection and looks just like the original.
Is there any tool to do this automatically? If not, maybe I'll code it myself in Python. Do you have any recommendation around that?
Thanks
Monolith is a CLI tool for saving complete web pages as a single HTML file
See https://github.com/Y2Z/monolith
With apologies to OP, as this answer is probably far too late for him, but I'm posting it to help anyone with a similar problem:
HTTrack is an open-source project that does almost exactly what you described, though it doesn't work perfectly on some of the more peculiar JS.
It saves the page with most of the JS, the major images, and everything that the page needs to appear complete. It can be configured to include or exclude the entire or partial JS, images, and CSS.
This does not import all of the JS and other content into the HTML file, but neatly organizes all of the content into one folder and corrects all of the paths to make the folder portable.
It also seems to have trouble grabbing some external sources that are protected, but if it is your local site and simply uses common scripts like JQuery, you should be fine. When I tested it, it correctly downloaded all of my local CSS and any valid external CSS library that I incorporated, the JQuery and derivative scripts that I was using, and the embedded images.
Just to save everyone a question, the program by default saves the downloaded websites to C:\My Web Sites.
I'm stuck... I'm trying to reference a javascript file that has been embedded inside a third party assembly, but it doesn't seem to work:
What I've done:
I have a folder RefAssemblies where this library DLL with embedded javascript file is located
I added a project reference and pointed to this library assembly
I added a line in my javascript file where I want the reference to work ie.
/// <reference name="ScriptName.js" assembly="AssemblyName" />
I tried naming my assembly with name only, and also with full assembly name including name, version, culture and public key token. No difference.
Added my library assembly to my project's web.config inside system.web\assemblies (AFAIK that's the part where you have to add your assembly and make it well-known in your application) so I should be able to access it without referencing assembly at all just resource name. No difference.
And yes I was pressing the Ctrl+Shift+J after any change I've done so Visual studio refreshed Javascript intellisense cache. I even unloaded and reloaded my web project after I changed web project's web.config. Just so that Visual Studio would read the file and reload everything anew.
But still unlucky... And I'm not getting any Javascript Intellisense errors in the General output window either...
I must be missing something...
Additional note:
It may be helpful to know that I'm running ReSharper 6.1.1000.82 within Visual Studio 10.0.40219.1
Other things I've done afterwards
Uninstalled ReSharper from my machine
Reset Visual Studio by running it from command prompt using
devenv /ResetSettings
No luck either.
Do you have any other suggestions I might do?
I'm also having odd problems with embedded resources. I have managed to get it working though by using the fully qualified resource name. You can find that out by using ilspy to open the assembly and then select the Resources folder, then the full name of all the resources will be displayed.
As i said i have gotten this to work in one solution, but in others it doesnt work and i have no idea why.. the non working solution has a diffrent structure where the diffrent assemblies are in diffrent folders, but i have nto been able to isolate that as the cause..
-edit-
After much trial and error it seems like the key thing to making embedded javascript references work is to set the output folder for the project containing the reference to bin and not bin\debug.
from what i can gather, there are no other settings or assembly references that affect the embedded resources, only the output folder of the project that has the reference. i'm guessing that the javascript language service is unable to find the assemblies with embedded resources unless they are in the private path or the gac, but i have yet do understand exactly where this binpath is set.
i've tried setting it on the project itself and on what i think is the actual language service exe, but to no avail.
i made a connect issue here:
https://connect.microsoft.com/VisualStudio/feedback/details/770185/js-references-to-embedded-files-require-the-referencing-project-to-have-outputpath-bin
I want to insert an external javascript file in my JSF page. So what I did is:
Now, the JSF file is named start.xhtml and both are sitting in the same folder. However, when I ran , there is nothing happend [ The javascript supposed to pop up alert when I click]. I checked the page source, and apparent in the .
What did I do wrong to get the RES NOT FOUND? I even put absolute path but nothing happened :(. Me sad panda.
Fyi, I am using the latest Netbeans.
Thanks,
Song.
Try including your script this way
<script src="#{facesContext.externalContext.requestContextPath}/yourPathAfterWebpages/scriptFile.js" type="text/javascript"></script>
First of all, an absolute path must work. It's not question of Netbeans or Glassfih, or JSF - it's a browser thing. And if your browser had a fault preventing it from fetching Javascript from valid urls, you would have noticed. So if your Javascript does not load, there's a 99% chance it's a plain typo, a stupid mistake (forgetting directory name, adding an extra slash or such things), and nothing to do with any of the mentioned technologies.
The other theory (just a theory - I don't have enough data to prove it) is that you have a standard mapping, showing all the faces files in a "virtual" faces directory (/faces/*). So that when you put your index.xhtml in the main directory of a Foo project, you see it under: localhost:8080/Foo/faces/index.xhtml. The "faces" part of path does not represent any real directory, it's just a mapping. So if you have a js file sitting by an index.xhtml, you would address it like: '../yourjavascript.js'; the ../ is to compensate for the virtual directory part.
Anyway, I strongly encourage you to drop your script loading dillemas and use the official and nice way of loading resources such as javascript is to put them into a directory called "resources" (make one under the "web pages" node in Netbeans, it will end up in the top directory of your .war); to get a path of any file saved under resources, you use EL like: #{resource['filename.css']}. You will load your script by:
<script src='#{resource['script.js']}' ></script>
If you use the resource directory, you can do many more things, read up on some detailshere