ページに実行ボタンを埋め込む
2677 ワード
最近は微博が好きで、winter-cnが大幅にjqueryに関する文章を更新したのを見て、クリックして入ると、ブログ園で書いていることに気づきました.他のいくつかの自分の興味のある文章を読んでいるうちに、ブログ園にもhtmlに埋め込まれたコードが実行されていることに気づきました.そこで興味を持ちました.自分も模範的にしました.次はコードです.もちろん、単純な雛形にすぎない.
まずchromeの下で実行して、効果を実現することができて、それからieを試してもいいですが、firefoxの下に着いて、新しいページにundefinedを表示して、おかしいですね.jsコードの互換性がないのではないでしょうか.そこでjsの実現コードをよく見てみると、やはりinnerTextはfirefoxの下で実現しないので、textContentを交換して、これでいいようです.ブログ園という機能は改善されるはずです.
友达、どのようにコードを実行したいならば、直接上のコードをコピーしないで、このページのソースコードを開いて、preラベルの直接のコードをコピーしてこそコピーすることができます.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head>
<title> </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<script type="text/javascript">
</script>
<style type="text/css">
pre {
background: none repeat scroll 0 0 #F7FAFE;
border: 1px solid #ABCDF3;
color: silver;
line-height: 1em;
}
</style>
</head>
<body>
<div>
<button onclick="var w=window.open();w.document.write(this.nextElementSibling.innerText);"/> </button>
<pre>
<!doctype HTML>
<html>
<head>
<style type="text/css">
<strong style="color: black">
#green {
margin:10px 10px 10px 10px
}
#blue {
margin:10px 10px 10px 10px
}
#red {
margin:10px 10px 10px 10px
}
</strong>
</style>
</head>
<body>
<span style="color: black">
<div id="green" style="background:lightgreen;height:100px;width:100px;"></div>
<div id="blue" style="background:lightblue;height:100px;width:100px;"></div>
<div id="red" style="background:pink;height:100px;width:100px;"></div>
</span>
</body>
</html>
</pre>
</div>
</body>
</html>まずchromeの下で実行して、効果を実現することができて、それからieを試してもいいですが、firefoxの下に着いて、新しいページにundefinedを表示して、おかしいですね.jsコードの互換性がないのではないでしょうか.そこでjsの実現コードをよく見てみると、やはりinnerTextはfirefoxの下で実現しないので、textContentを交換して、これでいいようです.ブログ園という機能は改善されるはずです.
var w=window.open();if(this.nextElementSibling.innerText) w.document.write(this.nextElementSibling.innerText); w.document.write(this.nextElementSibling.textContent);友达、どのようにコードを実行したいならば、直接上のコードをコピーしないで、このページのソースコードを開いて、preラベルの直接のコードをコピーしてこそコピーすることができます.