1. Run JavaScript code in the browser address bar
Many people should still know this. You can run JavaScript code directly in the browser address bar by starting with javascript: followed by the statement to be executed. such as:
javascript:alert('hello from address bar :)');
Paste the above code into the browser address bar and press Enter and the alert executes normally, and a pop-up window appears.
You go try it, is there no pop-up window? ? ?
that is because:
If you copy and paste the code to the browser address bar,
IE and Chrome will automatically remove the javascript: at the beginning of the code, so you need to manually add it to execute it correctly
. Although Firefox will not remove it automatically, it does not support it at all. Run the JS code in the address bar,
sigh~
2. Run HTML code in browser address bar
If there are many people who know the above little secret, there are fewer people who know this secret. You can directly run HTML code in the address bar of browsers with non-IE kernels!
For example, enter the following code in the address bar and press Enter to run, the specified page content will appear.
data:text/html,<h1>Hello, world!</h1>Three, use the browser as an editor
Still making a fuss on the browser address bar, paste the following code into the address bar and run it, the browser becomes a primitive and simple editor, just like the notepad that comes with Windows, roar.
data:text/html, <html contenteditable>
In the final analysis, thanks to the newly added contenteditableattribute in HTML5 , when the element is specified with this attribute, the content of the element becomes editable.
By extension, after putting the following code into consoleexecution, the entire page will become editable, trample it at will~
document.body.contentEditable='true';
Fourth, use the a tag to automatically parse the URL
Many times we have the need to extract domain names, query keywords, variable parameter values, etc. from a URL, but we never expected that the browser could easily help us complete this task without us having to write regulars to crawl. The method is to create an a tag in the JS code and assign the URL to be parsed to the href attribute of a, and then we get everything we want.
var a = document.createElement('a');
a.href = 'http://github.com/fly-sy/code';
console.log(a.host);
Five, the element with ID on the page will create global variables
In an HTML page, all elements with ID attributes will create corresponding global variables in the JavaScript execution environment, which means that document.getElementById is redundant like a human appendix. But in actual projects, it's best to write it as you should. After all, there is much less chance of trouble in conventional code.
<div id="sample"></div>
<script type="text/javascript">
console.log(sample);//直接写id名即可获取到元素
</script>6. When loading CDN files, you can omit the HTTP logo
The popular CDN is to load some general JS and CSS files from a dedicated server. For security reasons, some CDN servers use HTTPS connection, and some are traditional HTTP. In fact, we can ignore this when using it and change it. Omit from the URL.
<script src="//cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
Seven, do not declare the value exchange of the third variable
We all know the normal practice of exchanging the values of two variables, that is, to declare an intermediate variable to temporarily store. But few people challenge the situation of not declaring intermediate variables. The following code shows this implementation. Quite creative.
var a=1,b=2;a=[b,b=a][0];
8. Forbid others to load your page with iframe
The code below is self-explanatory, there is not much to say.
if (window.location != window.parent.location) window.parent.location = window.location;
九、console.table
Chrome exclusive, IE bypass console method. You can output JavaScript associative arrays to the browser console in tabular form. The effect is amazing and the interface is beautiful. Like~like~like~
var data = [{'品名': ' ', '数量': 4}, {'品名': ' ', '数量': 3}];
console.table(data);