【WordPress実験】記事にJavaScriptコードを埋め込む方法
概要
外部で作成したJavaScriptコードをWordPressの記事内に埋め込むと動作するのか、気になり試してみました。
方法は、HTMLドキュメントを作り、WordPress の記事にiframeで埋め込みます。
↓ここにiframeで読み込んでいます。この記事自体を開いた3秒後にalert()が表示されます。
詳細
HTMLドキュメント
作成したJavaScriptを含むHTMLドキュメントはこちら
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>JavaScriptSample</title>
<script type="text/javascript">
window.addEventListener("load", function() {
setTimeout(function() {
alert("Hello");
}, 3000);
});
</script>
</head>
<body>
JavaScriptSample
</body>
</html>
一般的な雛形のヘッダに、画面ロード後、3秒後にalert(“Hello”)を呼んでいます。
これをscript.htmlとして保存し、Webサーバに格納しました。
記事への埋め込み
記事はテキストモードにし、以下を埋め込みました。
<iframe src="https://lab.tech-guild.com/javascript/script.html"></iframe>
絶対パスにしていますが、相対パスでも動くと思います。
今回別のサブドメインに置いたファイルを参照していますが、同じドメインであってもWordPressのプレビューなどで確認する際はパスの関係が変わると思うので、てっとり早く確認するなら絶対パスがいいと思います。
注意点
記事の編集画面を開くたびに、alert()が表示され、邪魔になります。
つまり、編集画面を開くたびにJavaScriptが動作してしまいます。
重たい処理をさせるのであれば、記事を書き上げた最後に埋め込むなどの工夫が必要かと思います。
また、iframeの呼び出し先を別ドメインにするとクロスサイトになりますので、JavaScriptの処理内容によってはセキュリティの関係で動かない可能性があります。
今回、このブログのドメインtech-guild.comに対し、スクリプトはlab.tech-guild.com(別ドメイン)に配置しています。
後者は、スクリプトをWordPressと同じサーバに格納すれば解決すると思います。