javascript 通信协议
<h2 id="简介">简介</h2><p><code>javascript</code> 通信协议是一个伪协议<sup class="footnote-ref"></sup>, 用于指定 URL 为 JavaScript 代码</p>
<ul>
<li>
<p>语法:</p>
<pre><code class="language-javascript">javascript:someScript;
</code></pre>
<ul>
<li><code>someScript</code> 是一个或多个使用 <code>;</code> 分隔的 JavaScript 语句.</li>
</ul>
</li>
<li>
<p>示例</p>
<pre><code class="language-javascript"><a href="javascript:alert('JavaScript Link!');">JavaScript Link</a>
</code></pre>
</li>
</ul>
<h2 id="特点">特点</h2>
<ul>
<li>
<p>返回值会替换当前文档</p>
<ul>
<li>
<p>对于 Chrome 浏览器来说, 如果最后一条 JavaScript 语句的值为<strong>字符串</strong> (使用<code>''</code>, <code>""</code> 或 <code>`</code> 括起来的值), 那么该字符串会替换当前文档的内容, 作为新文档显示出来</p>
</li>
<li>
<p>对于 Firefox 浏览器来说, 如果最后一条浏览器的返回值不为 <code>undefined</code>, 那么就调用该返回值的 <code>toString()</code> 方法 (如果 toString() 方法不存在就调用 <code>valueOf()</code> 方法), 得到的结果作为新文档显示出来</p>
</li>
<li>
<p>返回值为 <code>undefined</code> 的几种常见写法</p>
<pre><code class="language-javascript">javascript:;
javascript:undefined;// 全局变量 undefined 的值可能被更改
// void 将之后的内容当作表达式, 然后对该表达是求值, 并始终返回 undefined, 而不管全局变量 undefined 的值是否被改变
// 以下写法等价
javascript:void(0);
javascript:void 0;
</code></pre>
</li>
</ul>
</li>
</ul>
<h2 id="用途">用途</h2>
<ul>
<li>任何使用 URL 的地方都可以使用该通信协议
<ul>
<li>
<p>在保留锚元素 href 属性的同时防止点击锚元素页内/外跳转</p>
<pre><code>javascript:;
javascript:undefined;
javascript:void(0);
</code></pre>
</li>
<li>
<p>当作 bookmarklet 这里写了个小 Demo</p>
<pre><code class="language-javascript">// 修改书签的 URL 为以下代码, 就可实现分屏功能
javascript:'<html><head><title>'+document.title+'</title></head><body style="margin:0;"><iframe style="border:none;" width="50%" height="100%" src='+location.href+'></iframe><iframe style="border:none;" width="50%" height="100%" src='+location.href+'></iframe></body></html>';
</code></pre>
</li>
<li>
<p>执行 JavaScript 代码 (不推荐)</p>
<pre><code class="language-javascript">// 更改页面背景为绿色 (推荐为锚元素绑定事件来更改页面背景)
<a href="javascript:void(document.body.style.backgroundColor='green');">
// 打开新页面 (注意需返回 undefined, 否则在火狐浏览器会替换文档)
<a href="javascript:window.open('about:blank'); void(0);">
</code></pre>
</li>
</ul>
</li>
</ul>
<hr class="footnotes-sep">
<section class="footnotes">
<ol class="footnotes-list">
<li id="fn1" class="footnote-item"><p>网络通信协议 ↩︎</p>
</li>
</ol>
</section><br><br>
来源：https://www.cnblogs.com/ayuuuuuu/p/13362571.html
頁:
[1]