javascript


【JQuery】iPhoneでのiframeの設定とスクロール

iPhoneでは、iframeの高さが設定できないので、フレームをはみ出る大きなコンテンツもスクロールバーは表示されず、iframeのサイズが無視されて表示される。

解決するには、iframeの真上の要素にサイズを設定する。

sample.php
----------------------------------------
<?php //スクロール量表示場所 ?>
<div id="log"></div>

<div class="ifrm-container">
<iframe src="iframe_test.html" id="iframe" class="ifrm" scrolling="auto"></iframe>
</div>
----------------------------------------

sample.css
----------------------------------------
.ifrm-container {
width:300px;
height:400px;
overflow:auto;
-webkit-overflow-scrolling:touch;
}

.ifrm {
width:100%;
height:100%;
border:none;
display:block;
}
----------------------------------------

参考サイト

jqueryでスクロールバーを操作する場合は、iPhoneでは、iframeをかこう要素にイベントを設定、それ以外ではiframe要素自身にイベントを設定する

//iPhone以外で100スクロールさせる
----------------------------------------
$($("#iframe").contents()[0]).scrollTop(100);

//スクロール量の表示
$( $('#iframe')[0].contentWindow ).scroll(function () {
var st = $($("#iframe").contents()[0]).scrollTop();
$("#log").html(st);
// });

----------------------------------------

//iPhoneで100スクロールさせる
----------------------------------------
$(".ifrm-container").scrollTop(100);

//スクロール量の表示
$('.ifrm-container').scroll(function () {
var st = $(".ifrm-container").scrollTop();
$("#log").html(st);
});
----------------------------------------

参考:【jquery】iframe内のスクロールイベント設定とスクロール量取得

ただし、iPhoneで表示されるiframeは仕様上テキストが選択できない。テキストが選択したい場合は、擬似フレームを使う。

テキストが選択できない理由はこれだった↓↓
iPhoneで長文のテキストが選択しにくい

【JQuery】iframe内をタップしたらイベントを発火させる

sample.html
-------------------------------------------
<!DOCTYPE HTML>
<html>

<head>
<script src="js/jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="js/test.js" type="text/javascript"></script>
</head>
<body>
<iframe src="iframe_test.html" id="iframe"></iframe>
</body>
</html>
-------------------------------------------

iframe_test.html
-------------------------------------------
<html>
<head>
</head>
<body>
<div>
インラインフレームの内容
</div>
</body>
</html>
-------------------------------------------

test.js
-------------------------------------------
//iframeの内容が完全に読み込まれたら
$(window).on("load", function(e){
//iframeにはタッチやクリックイベントは発行されないためこういう記述
$("#iframe").contents().find("body").on("touchstart", function(e){
alert("タップされた");
});
});
-------------------------------------------

参考ページ1 
参考ページ2

ただ、これだとiPhoneのsafariだと「click」うまく動作しない。「touchstart」なら動く。理由はこれだと思う。
iPhoneのsafariだとbody要素に登録したclickは無効なのでdivなどに登録先を変える。

-------------------------------------------
$("#iframe").contents().find("body").on("click", function(e){
alert("タップされた");
});
-------------------------------------------

↓↓↓↓↓↓↓↓↓

-------------------------------------------
$("#iframe").contents().find("div").on("click", function(e){
alert("タップされた");
});
-------------------------------------------

iframe内の部品がクリックされたイベントを起こす場合は↓

■sample.html
-------------------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<title>Test</title>
<script type="text/javascript" src="jquery-1.4.1.min.js"></script>
<script type="text/javascript">
$(window).load(function() {
$("#hoge").contents().find("#fuga").bind("click", function() {
alert("hogehoge");
});
})
</script>
<iframe id="hoge" src="hoge.html"></iframe>
-------------------------------------------

■hoge.html
-------------------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<title>hoge.html</title>
<button id="fuga">PUSH!!</button>
-------------------------------------------
参考:http://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q1036893315

【javascript】スマホで縦スクロール禁止

javascript の記述
---------------------------------------
//touchmove の縦スクロールを禁止
document.body.addEventListener( 'touchmove', function(e){
e.preventDefault();
});
---------------------------------------

jQuery の場合
---------------------------------------
// スクロール禁止
$(window).on('touchmove.noScroll', function(e) {
e.preventDefault();
});

// スクロール禁止 解除
$(window).off('.noScroll');
---------------------------------------
※.noScroll は解除するためにつけた名前

参考ページ

http://qiita.com/kokushin/items/ef96194bd0fa7c145d7b

PHPの配列をjavascriptに渡す

PHPの配列をjavascriptに渡す場合は、いったんjson形式に変換するといい。

スクリプト例 ここから
--------------------------------------------------------
<?php

$hairetu = array('りんご', 'もも', 'なし');

//配列をJavaScriptに渡すために一度jsonに変換
$jsonTest=json_encode($hairetu);

?>

<html>
<head>
<title>タイトル</title>
</head>

<body>
<script type="text/javascript">

//JSON.parseを使って配列を受け取る
var test=JSON.parse('<?php echo $jsonTest; ?>');

for (var i = 0; i < test.length; i++) {

alert(test[i]);

}

</script>

</body>
</html>

--------------------------------------------------------
ここまで

参考サイト

http://future-software-labo.anyagent.net/php%E3%81%8B%E3%82%89javascript%E3%81%AB%E9%85%8D%E5%88%97%E3%82%92%E6%B8%A1%E3%81%99/

javascriptファイルが外部ファイルの場合

PHPファイル
--------------------------------------------------------
//カスタムデータ属性にjson形式の配列をセット
<script id="script" src="js/script.js" data-json-test ='<?php echo json_encode($hairetu)?>'></script>
--------------------------------------------------------

javascriptファイル

script.js(外部ファイル)
--------------------------------------------------------
//jQueryを利用してカスタムデータ属性にアクセス
var $script = $('#script');
var test = JSON.parse($script.attr('data-json-test'));
--------------------------------------------------------

参考サイト

http://qiita.com/cither/items/b98cc4e237dcc8f7e51f

http://dresscording.com/blog/html5/custom_data_attribute.html

【javascript】touchendでうまく座標が取れない件

iOS の safari において touchend で取得した座標を alert で表示するとうまく座標を表示できない事象が発生。

原因不明でバグのような気がするが、次のように対処できる。

------------------------------
alert('座標:' + touchX);
------------------------------

↓↓↓

------------------------------
setTimeout(function(){ alert('座標:' + touchX); }, 0);
------------------------------

参考ページ:

http://gomojp.blog77.fc2.com/blog-entry-144.html

【javascript jQuery】eachでループして出力するとundefinedが出る

jQuery(javascript) で eachでループして出力すると undefined が出た。

//each で配列を展開
-------------------------
var my_value;
$.each(my_value, function(i, value) {
all_my_value += my_value;
});
-------------------------

上記の all_my_value は先頭に undefined という文字が入る。原因は var my_value; の部分で変数に何の値も代入していないこと。

undefined は 未定義値のこと。変数を宣言だけして何も代入していないと出る。

//これだと undefined の出る可能性がある
-------------------------
var 変数名
-------------------------

出したくなければ殻の値でも入れておく

//これだと undefined は出ない
-------------------------
var 変数名 = ""
-------------------------

参考ページ こちら

【HTML5 javascript】contenteditableの値をPOSTする

contenteditable で編集可能にした値はテキストエリアやテキストフィールドにあるわけではないので form タグで囲っただけでは POST できない。

POST は javascript を用いれば可能。

--------------------------------------------------
<input type="button" value="送信" onclick="document.form1.my_value.value = document.all.textarea1.innerText;document.form1.submit();">

<form method="post" name="form1" action="">

<div id="textarea1" contenteditable>この文字列を送信する</div>
<input type="hidden" name="my_value" value="">

</form>
--------------------------------------------------

contenteditable で編集可能な値を隠しフォーム(hidden)に入れて、それを javascript で送信する。

POST したい値が複数ある場合は、値を「;」で区切ればいい。

--------------------------------------------------
<input type="button" value="送信" onclick="document.form1.my_value1.value = document.all.textarea1.innerText;document.form1.my_value2.value = document.all.textarea1.innerText;document.form1.submit();">
--------------------------------------------------

【javascript】テキストエリアの文字列を別のテキストエリアに表示する

javascript で、テキストエリアの文字列を別のテキストエリアに表示したときの覚書

以下のようにテキストエリアが二つある。
----------------------------------------------
<div>
<form id="form1">
<textarea name="msg" cols=40 rows=4 id="textarea1">
この文字を textarea2 に表示したい
</textarea>
</form>
</div>

<div>
<form id="form2">
<textarea name="msg" cols=40 rows=4 id="textarea2">
ここに textarea1 の文字列が表示される
</textarea>
</form>
----------------------------------------------

textarea1 の文字列を textarea2 に表示する、javascript の記述

idを指定してアクセスする記述
----------------------------------------------
document.forms["form2"].textarea2.value = document.forms["form1"].textarea1.value;
----------------------------------------------

こういう記述もある
----------------------------------------------
document.forms.form2.textarea2.value = document.forms.form1.textarea1.value;
----------------------------------------------

formは番号指定でも可能
----------------------------------------------
document.forms[1].textarea2.value = document.forms[0].textarea1.value;
----------------------------------------------

form の name で指定する方法
----------------------------------------------
<div>
<form id="form1" name="form_name1">
<textarea name="msg" cols=40 rows=4 id="textarea1">
この文字を textarea2 に表示したい
</textarea>
</form>
</div>

<div>
<form id="form2" name="form_name2">
<textarea name="msg" cols=40 rows=4 id="textarea2">
ここに textarea1 の文字列が表示される
</textarea>
</form>
----------------------------------------------

form の name で指定する場合、forms の記述は不要
----------------------------------------------
document.form_name2.textarea2.value = document.form_name1.textarea1.value;
----------------------------------------------

参考サイト

画像ファイルを持っていかれないようにする方法

インターネットで公開している以上、絶対に画像を持っていかれない方法はない。

ここで紹介するのは、画像を持っていきにくくして、知識の乏しい人なら画像の持ち出しを諦めるだろう方法。そして簡単な実装できる方法を選んだ。

1.baseタグで基準となるURLを設定する

baseタグは、相対パスで書かれたURLの基準を指定するもの。

もしページのソースを見られたら画像の場所がわかってしまう。

絶対パス
----------------------------
<img src="http://example.com/image2001/image01.jpg">
----------------------------

相対パス
----------------------------
<img src="image2001/image01.jpg">
----------------------------

上の二つどちらも、画像ファイルは「http://example.com/image2001/」の中にあると読める。

そこでbeseタグを使うと画像ファイルの場所を少し分かりにくくできる。

headタグの間にbaseタグを記述する
----------------------------
<base href="http://example.com/image2001/">
----------------------------

すると「image2001フォルダ」までが基準になるのでimgタグへの記述は下記のようになる。

相対パスで
----------------------------
<img src="image01.jpg">
----------------------------

「image2001」の記述を省略できるのでimgタグ内だけを見ても画像の場所が分からなくなる。

2.baseタグはjavascriptで隠す。

imgタグだけを見ても画像ファイルの場所は分からないが、headタグ間に記述したbaseタグを見ると分かってしまう。
そこでbaseタグはheadタグ間に書かずに、外部ファイルとしてjavascriptで書くとよりいい。

外部ファイルとして読み込む
----------------------------
document.write('<base href="http://example.com/image2001/">');
----------------------------

参考

http://www.broadband-xp.com/hidesource/base.html

3.右クリックを無効にする

これまでの実装でソースを見ても画像ファイルの場所をわかりにくくすることは出来るが、画像自体を右クリックすれば画像のURLも分かるし、保存も出来てしまう。

そこで右クリックを禁止する。

bodyタグ内に記述
----------------------------
<body onContextmenu="return false">
----------------------------

これだと右クリックは防げるがデスクトップへドラッグすれば保存できてしまう。
そこでjquery.dwImageProtector.jsというjqueryのプラグインを使う。

使い方はこちらこちらが分かりやすい。

http://www.css-lecture.com/log/javascript/dwimageprotector.html

jquery.dwImageProtector.jsのソースはこんな感じ
---------------------------------------------------------
jQuery.fn.protectImage = function(settings) {
settings = jQuery.extend({
image: 'blank.gif',
zIndex: 10
}, settings);
return this.each(function() {
var position = $(this).position();
var height = $(this).height();
var width = $(this).width();
$('<img />').attr({
width: width,
height: height,
src: settings.image
}).css({
border: '1px solid #f00',
top: position.top,
left: position.left,
position: 'absolute',
zIndex: settings.zIndex
}).appendTo('#content')
});
};
---------------------------------------------------------

head内のソースはこう
---------------------------------------------------------
<script src="http://example.com/js/jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="http://example.com/js/jquery.dwImageProtector.js" type="text/javascript"></script>
<script type="text/javascript">
$(window).bind('load', function() {
$('img.protect').protectImage();
});
</script>
---------------------------------------------------------

保護するイメージには class を設定する
---------------------------------------------------------
<img src="image01.jpg" alt="" width="500" height="500" class="protect" />
---------------------------------------------------------

画像を囲む枠がずれる場合は「.appendTo('body')」の部分をbodyでなく任意の場所に変更すればうまくいく。

【jquery】masonryがスマホ画面で横並びしない場合の解決方法

javascript プラグインの masonry を使ったページでウインドウが横並びしない場合の対処法。

対処法 → columnWidth オプションを設定する。

------------------------------------------------------
<div class="js-masonry">

↓↓↓↓

<div class="js-masonry"
data-masonry-options='{
"columnWidth": 50,
"itemSelector": ".item",
"transitionDuration": "1.5s"
}'
>
------------------------------------------------------

columnWidth は、ボックスの横幅を指定するオプション。
masonry のデフォルトでは、スマホの画面幅にに二つ以上ウインドウを並べることはサイズ的に無理らしい。
そこで、50pxとかボックスのサイズを小さく指定する必要がある。

2 / 3123