web-dev-qa-db-ja.com

JavaScriptでページのベースhrefを設定するにはどうすればよいですか？

現在のホスト名に基づいて、JavaScriptでページのベースhref属性を設定したい。別のホスト名で表示できるHTMLページを生成しました。つまり、ベースhrefタグの生成は1つのホスト名では機能しますが、別のホスト名では正しくありません。

javascripthrefbase
25
Zach Gardner

これを行う正しい方法は、現在のホスト名に基づいてタグのdocument.writeを実行することです。

正しい：

<script type="text/javascript">
document.write("<base href='http://" + document.location.Host + "' />");
</script>

この方法により、IE、FF、Chrome、Safariで正しい結果が得られました。これは、以下を実行する場合と（正しい）異なる結果を生成します。

不正解：

<script type="text/javascript">
var newBase = document.createElement("base");
newBase.setAttribute("href", document.location.hostname);
document.getElementsByTagName("head")[0].appendChild(newBase);
</script>
39
Zach Gardner

このようにした方がいいと思います

    <script type="text/javascript">
        document.head.innerHTML = document.head.innerHTML + "<base href='" + document.location.href + "' />";
    </script>

なので location.hostnameはアプリケーションコンテキストルートを返しません！ document.locationコンソール上console.logで利用可能なすべてのメタデータを表示するにはdocument.location。

6
Mahieddine M. Ichir
<script>
document.write("<base href='"+ window.location.protocol +'//' + window.location.Host + "' >");
</script>
2
Aleem Latif

私は上の答えに同意しなければなりません。 「正しくない」ソリューションが間違っている唯一の理由は、プロトコルが考慮されていないために失敗することです。

プロトコル/ホスト/ポートを説明する必要がある実用的なソリューションは次のとおりです

    var base = document.createElement('base');
    base.href = window.location.protocol + '//' + window.location.hostname + (window.location.port ? ':' + window.location.port : '');
    document.getElementsByTagName('head')[0].appendChild(base);

これは現在、IE11を含むすべての主要なブラウザーで正常に動作します

私はこれを使用して、誰かが興味を持っている場合は、このベースのhrefの末尾にサフィックスを追加することもサポートするnpmパッケージを作成しました

https://www.npmjs.com/package/dynamic-base

https://github.com/codymikol/dynamic-base

0
cody mikol