詳しい人求む！

jquery と javasprict

解決済

  • 質問者：junjunjujujun
  • 質問日時：2017/04/15 13:22
  • 回答数：5件

サイトを作成中です。
まず下記のとおりjqueryでheader、side、footerをインクルードしています。

<script>
$(function() {
$("#header").load("header.html");
$("#side").load("side.html");
$("#footer").load("footer.html");
});
</script>

次に、コピーライトの年を自動更新したく、footer.htmlの中にjavasprictを入れました。

Copyright&copy; 2014
　<script type="text/javascript" language="JavaScript">
<!--
TYnow = new Date();document.write( ' - ' + TYnow.getFullYear() );
// -->
</script> ○○○○ CO.,Ltd.

すると、全体が「-2017」としか表示されなくなってしまいました。
どうすればいいのでしょうか、どなたか教えて下さい。
宜しくお願いいたします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

このQ&Aに関連する最新のQ&A

「JavaScript コピー」に関するQ&A： JavaScriptで、コピーボタンを配置し、その行のテキストデータを取得したいのです。

さらに表示

「jQuery テキスト」に関するQ&A： JS・JqueryやWPプラグインで、曜日・時間帯でテキストを何回か自動変更する方法

「PHP Android」に関するQ&A： AIR for Android と PHPの連携

「意味 Chrome」に関するQ&A： chrome の意味

A 回答 (5件)

No.5ベストアンサー

  • 回答者： fujillin
  • 回答日時：2017/04/15 23:55

ANo4です。



jQueryを利用なさっているのでしたね。
動作すれば良いのであれば、footer.htmlの内容を、

Copyright&copy; 2014<span id="copyright"></span> ○○○○ CO.,Ltd.

とでもしておいて、スクリプトの
$("#footer").load("footer.html"); の部分を

$("#footer").load("footer.html", function(){
var d = new Date();
$("#copyright").html(" - " + d.getFullYear());
});

のようにすれば動作すると思います。
(これだと、わざわざloadする意味がほとんどありませんけれど…)

※ idが重複するような場合は、違うものに変えて下さい。
    • good
    • 0
    • 件
通報する
この回答へのお礼

何度もご回答いただき、ありがとうございました。
見事にできました。
本当に、ありがとうございました。

通報する
お礼日時：2017/04/16 14:07

No.4

  • 回答者： fujillin
  • 回答日時：2017/04/15 21:54

ANo1です。



＞～～とかがさっぱり意味不明でわかりません。
大変、失礼いたしました。
リンクをここのシステムが自動で変換してくれるのですが、中途半端な変換になってしまっているようです。
以下のアドレスの最初に英数小文字のhを付け加えて下さい。
ttps://www.google.co.jp/search?q=javascript+文書+書き替え&oq=javascript+文書+書き替え&aqs=chrome..69i57.26265j0j4&client=ms-android-kddi-jp&sourceid=chrome-mobile&ie=UTF-8#xxri=2

念のため、最初の方に出てくるサイトも・・
http://hacknote.jp/archives/11502/
http://www.24w.jp/study_contents.php?bid=javascr …
ttp://design-spice.com/2010/07/27/javascriptでhtml中のテキストを変更する/
    • good
    • 0
    • 件
通報する
この回答へのお礼

何度もご回答頂き、ありがとうございました。

通報する
お礼日時：2017/04/16 14:10

No.3

  • 回答者： t_fumiaki
  • 回答日時：2017/04/15 18:38

>>他のheader、side、本文が表示されないのではないでしょうか？


そうなるから、loadとloadされる側でのdocument.writeは止めるべきです。

phpでincludeした方が良いと思います。
header部分、side部分、footer部分を作ってファイルにして置き、メインからincludeすれば、こういう問題は起きないケド。

メインが.phpになってしまうけど、.htaccessファイルに記述して.htmlのまま動かせる。

実戦では、この方法しか使ってません。
動的javaは何が起きるか解らないから、設計段階でincludeを念頭に置いてます。
    • good
    • 0
    • 件
通報する
この回答へのお礼

ありがとうございました。
phpはまだやったことがないので、組み込み方がわかりません。
勉強します。

通報する
お礼日時：2017/04/16 14:08

No.2

  • 回答者： t_fumiaki
  • 回答日時：2017/04/15 16:08

document.writeはhtmlソースコードなどを出力する為のものなんですがloadと組み合わせる場合には注意が要ります。



通常で書くと、さほど問題は置きないんですが、「ページの読み込み後に文字を挿入・・・」みたいな事をすると、真っ白になったり、挿入文字だけになったりします。

仕方無いのでフッターの全てをdocument.writeで吐き出します。

TYnow = new Date();document.write('Copyright&copy; 2014 - ' + TYnow.getFullYear()+' ○○○○ CO.,Ltd.' );
    • good
    • 0
    • 件
通報する
この回答へのお礼

回答いただき、ありがとうございます。
フッターの全てをdocument.writeで吐き出すと、真っ白な背景に「Copyright(c) 2014 -2017 ○○○○ CO.,Ltd.」が表示されるだけで、他のheader、side、本文が表示されないのではないでしょうか？
それとも、「フッターの全てをdocument.writeで吐き出す」とは、<head>内の<script>の$("#footer").load("footer.html");の代わりに、TYnow = new Date();document.write('Copyright&copy; 2014 - ' + TYnow.getFullYear()+' ○○○○ CO.,Ltd.' );を入れるのでしょうか？

通報する
お礼日時：2017/04/15 16:39

No.1

  • 回答者： fujillin
  • 回答日時：2017/04/15 15:42

こんにちは。



一旦、HTMLが読み込まれた後で document.write を実行すると、新しい文書が作成されます。そこに、-2017と書かれて、古い(それまで表示されていた)文書は捨てられます。

現在の文書の内容を変更したい場合は、document.getElementById などを用いて、DOMを取得し、内容を書き換えるようにしてください。
https://www.google.co.jp/search?q=javascript+文書+書き替え&oq=javascript+文書+書き替え&aqs=chrome..69i57.26265j0j4&client=ms-android-kddi-jp&sourceid=chrome-mobile&ie=UTF-8#xxri=2
    • good
    • 0
    • 件
通報する
この回答へのお礼

早速に回答いただき、ありがとうございます。
ただ勉強不足のため「document.getElementById などを用いて、DOMを取得・・・」とか、その後の「https://www.google.co.jp/search?q=javascript+文書+・・・」とかがさっぱり意味不明でわかりません。
具体的にどうすればいいのか教えていただければ助かります。

通報する
お礼日時：2017/04/15 16:29

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

このQ&Aを見た人はこんなQ&Aも見ています

関連するQ&A

関連するカテゴリからQ&Aを探す

専門家回答数ランキング

専門家

※過去一週間分の回答数ランキングです。

Q質問する（無料）

他の専門家の回答をチェック

このQ&Aと関連する良く見られている質問

Qvar $i = hoge; $の意味について

初心者の質問ですみませんが教えて下さい。
jqueryのソースで以下のソースがあったのですが、
var i = ではなくvar $i にしないといけない理由ってありますか？

var $i = $( '#img' ); // 対象の img タグを選択
var img = new Image();
img.src = $i.attr('src');

Aベストアンサー

こんにちは。

$iにしなくてはいけない理由はないと思います。

多分$('#img')でjQueryのオブジェクトを取得してるので$をつけているんだと思います。
(私もjQueryで取得した要素については$を付けるようにしています)
ようするにわかりやすいようにです。

他の回答も見る

Q$("body").height();と$("body").css("

$("body").height();と$("body").css("height");の違い？

jqueryにてbodyの高さを取得し、その数値に適当な値を足すなり引くなりして、他の要素の高さとして指定するということがやりたかったので

$(function() {
var bodyheight = $("body").css("height");
var mainheight = bodyheight-230;
$("#main").css("height",mainheight);
});

とした所、bodyの高さは取得できたのですが、その後が駄目だったので

$(function() {
var bodyheight = $("body").height();
var mainheight = bodyheight-230;
$("#main").height(mainheight);
});

と変更したところ、期待通りに動きました。

この２つの違いを、どなたかお分かりになる方にご教授いただきたいです。

Aベストアンサー

#1です。ちょっと考えが足らなかった。
css('height')だと読み出しも単位付だから設定の前に演算でNGでしたね。

というか、こういう演算目的のために常にピクセル単位で読み出したり設定できるjQuery.heightやjQuery.widthが用意されているのでしょうね。

他の回答も見る

Q$(document).readyとloadの違い

■質問1
jQueryの「$(document).ready(function()」と「$(window).load(function()」は何が違うのでしょうか？
下記理解で合ってるでしょうか？

●$(document).ready(function()
・複数回実行できる
・ページを全て読み込んだ後に実行
・ページの下部に記述しなくとも良い

●$(window).load(function()
・複数回実行できない(最後の1回が実行される)
・ページ読込開始時点で実行(正確には記述位置に来た時点？)


■質問2
「jQuery記述」と「JavaScriptだけで記述」とでは、内容やタイミングに違いはありますか？
・どちらも同じ？
「$(window).load(function()」V.S「window.onload = function(){」

Aベストアンサー

> ■質問1
> jQueryの「$(document).ready(function()」と「$(window).load(function()」は何が違うのでしょうか？
readyは「DOM要素の準備が完了した時」に呼び出される「jQueryイベント」であり、loadは生JavaScriptのonloadに相当する「Webブラウザ組み込みJavaScriptイベント」だ。

> ●$(document).ready(function()
> ・複数回実行できる
これもjQuery独自のイベントなのでできる事だね
> ・ページを全て読み込んだ後に実行
$(document).ready(function()の場合、documentのDOM要素が完了する（＝htmlの終了タグが読み込まれる）時に呼び出されるからページを全て読み込んだ後に実行しているように見えるのである。
> ・ページの下部に記述しなくとも良い

> ●$(window).load(function()
> ・複数回実行できない(最後の1回が実行される)
こちらも冒頭の解説の通り、window.onload = function()を何回も行うので最後の1個が有効になるのだね。
> ・ページ読込開始時点で実行(正確には記述位置に来た時点？)
いや、そんな事はない。window.onloadと同じタイミングというか登録した関数がwindows.onloadで呼び出される。なので、$("body").readyの後だ。ちなみに$("body").readyは$(document).readyよりも前に呼び出される（理由は「readyはDOMの準備が完了したら呼び出される」という意味を考えて欲しい）。

> ■質問2
> 「jQuery記述」と「JavaScriptだけで記述」とでは、内容やタイミングに違いはありますか？
> ・どちらも同じ？
> 「$(window).load(function()」V.S「window.onload = function(){」
違う。前者はjQueryオブジェクトにラップされるが後者はされない。

> ■質問1
> jQueryの「$(document).ready(function()」と「$(window).load(function()」は何が違うのでしょうか？
readyは「DOM要素の準備が完了した時」に呼び出される「jQueryイベント」であり、loadは生JavaScriptのonloadに相当する「Webブラウザ組み込みJavaScriptイベント」だ。

> ●$(document).ready(function()
> ・複数回実行できる
これもjQuery独自のイベントなのでできる事だね
> ・ページを全て読み込んだ後に実行
$(document).ready(function()の場合、documentのDOM要素が完了する（＝htmlの終了...続きを読む

他の回答も見る

Qjavascript:名('.$data.')で複数のデータを送る方法,(jqueryのload利用)

初めまして、jqueryを勉強し始めている初心者です。
jqueryのloadを利用して、PHPでページ分割作成してますが、
javascript:名('.$data.')で複数のデータを送る方法ご存知の方いましたら、教えていただけないでしょうか。。
何ぶん、勉強初めて、1ヶ月弱のため、不備等がれば、すみません。
hidden等でまとめてid作成すると、うまくページ分割ができませんでしたので
javascript:名('.$data.')で複数のデータを送る方法を検討しています。。
環境、jquery1.4, PHP5.0, eclipse3.5, mysql5.0
(sql等は問題なく動作してます)
//<php側抜粋--testo.php>
<html>
<head>
<script type="text/javascript" src="jquery1.4.js"></script>
<script type="text/javascript" src="testo.js"></script>
<title></title>
</head>
<body>
<div id="box"></div>
<?php
$nm=$_POST['nm'];
$page_num=$_POST['page_num'];

//echo'<a href="javascript:next('.$page.')">次のページへ＞＞</a>';
//↑と１つの値であれば問題なく値をtesto.jsに渡しphploadできます。。

//↓のjavascript:名前('.データ値.')で、２つの値を
//testo.jsでphpに渡しloadしたい。
//↓の解決策すみませんがご存知でしたら、教えてください。
//------ここ質問(1)------
echo'<a href="javascript:next('.$page.','.$nm.')">次のページへ＞＞</a>';
?></body></html>

//testo.js-----
/*function next(page)
{$("#box").load("testo.php",{page_num:page});}
　と１つの値であれば、POSTで正常にtesto.phpに渡せますが
　２つ値を渡したいので、
おそらく、全然ちがったり、間違えていると思います。。
調べてみましたが、分かりませんでした。。
*/
//--質問(2)↓--
function next(page,nm)
{$("#box").load("testo.php",{page_num:page,nm:nm});}

質問は上記(1)(2)です。全ソース記載したいのですが、
文字数オーバーのため、記載できませんでした。。
すみません
おそらく、不備や、勉強の不足さも感じるとは思いますが、
分かりやすく、ソース等で教えていただければ、幸いです。
すみません。。よろしくお願いいたします。

初めまして、jqueryを勉強し始めている初心者です。
jqueryのloadを利用して、PHPでページ分割作成してますが、
javascript:名('.$data.')で複数のデータを送る方法ご存知の方いましたら、教えていただけないでしょうか。。
何ぶん、勉強初めて、1ヶ月弱のため、不備等がれば、すみません。
hidden等でまとめてid作成すると、うまくページ分割ができませんでしたので
javascript:名('.$data.')で複数のデータを送る方法を検討しています。。
環境、jquery1.4, PHP5.0, eclipse3.5, mysql5.0
(sql等は問題な...続きを読む

Aベストアンサー

質問２の方で、２つ渡しているように見えるけど？

複数送る、は、きちんとできているのではなくて

他の回答も見る

Q

<html><head>
<style type="text/css">
<!--
#loading {
position: absolute;/* ロード中に表示する文字列の絶対位置の設定（必須） */
top: 35%;/* 画面の上部からの文字の位置（必須） */
left: 45%;/* 画面の左側からの文字の位置（必須） */
font-style: italic;
font-family: Verdana;
}
-->
</style>
<script type="text/javascript">
<!--
document.write('<style type="text/css">#doc { visibility: hidden; }<\/style>');
document.write('<div id="loading">Now Loading...<\/div>');// ロード中に表示する文字列

var i = 0;
var ele = document.getElementById("loading");
var str = ele.firstChild.data;

function char_loop(ele, str) {
ele.innerHTML = str.substring(0, i++ % str.length + 1);
}
setInterval("char_loop(ele, str);", 100);

window.onload = function() {
ele.style.display = "none";
document.getElementById("doc").style.visibility = "visible";
}
// -->
</script>
</head>
<body>
<span id="doc">
ここに本文を表示
</span>
</body>
</html>


上のような、NewLoading...　を作ってみたんですが、
画像のように表の内枠だけ残ってしまいます。
どうにかならないですかね。

ちなみにこの画像のURLは、↓こちらです。
http://shibaken.cool-biz.net/contents02.html

お願いします。

<html><head>
<style type="text/css">
<!--
#loading {
position: absolute;/* ロード中に表示する文字列の絶対位置の設定（必須） */
top: 35%;/* 画面の上部からの文字の位置（必須） */
left: 45%;/* 画面の左側からの文字の位置（必須） */
font-style: italic;
font-family: Verdana;
}
-->
</style>
<script type="text/javascript">
<!--
document.write('<style type="text/css">#doc { visibility: hidden; }<\/style>');
document.write('<div id="loading">Now Loading...<\/div>');// ロード中に表示...続きを読む

Aベストアンサー

当方の環境 Firefox (3.6, linux) で見たところ問題なく表示されたのでよくわからないのですが、 <script> ... </script> を <body> と <span> の間に入れるのがよいと思います。(document.write() を含む <script> は出力結果を埋め込みたい場所に書く。)

あと関係ないことですが、
中央に表示　text-align: center; width: 100%;
<div id="doc"> ... </div>が普通だと思います。

他の回答も見る
ページトップページトップ

Q質問する（無料）

このQ&Aを見た人がよく見るQ&A

人気Q&Aランキング

おすすめ情報