Jquery　バージョン違いの2つを有効にする方法

前提・実現したいこと

新規スマホページを制作しています。
ドロワー、スライドバナー、iframeの自動高さ調節のJqueryを1ページ内で動作させたいのですが、jqueryの3.2.1と1.6.1を共存させると下の行に記述したjqueryしか有効にならないようで、共存させる方法を試したのですがうまくいきません。$161等に置き換える方法を試しましたが当方はJSをカスタマイズした経験がなく、既存のコードを書き換える方法を教えていただけないでしょうか。

該当のソースコード

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!-- ドロワー、スライドバナーに関するJクエリ -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.js"></script> <!-- iframe高さ調節に関するJクエリ -->



<script>
//iframe高さ自動調節
$(function(){
	//iframe1
	setTimeout(function(){
		$("iframe[src='main.htm']").iframeAutoHeight();
	},1000);

	//iframe2
	setTimeout(function(){
		$("iframe[src='footer.htm']").iframeAutoHeight();
	},1000);

});
-->
</script>


<script>
//カルーセルバナー（中央寄せ両サイド表示レスポンシブ）
$(function() {
	$('.center-item').slick({
		infinite: true,
		dots:true,
		slidesToShow: 1,
		centerMode: true, //要素を中央寄せ
		centerPadding:'0', //両サイドの見えている部分のサイズ
		autoplay:true, //自動再生
		responsive: [{
			breakpoint: 480,
				settings: {
					centerMode: false,
			}
		}]
	});
});
</script>

試したこと

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.5, user-scalable=yes">
<base target="_top">
<link rel="stylesheet" href="style.css"> <!-- レイアウト -->
<link rel="stylesheet" href="slide_banner/slick-theme.css"> <!-- メイン上部カルーセルバナー -->
<link rel="stylesheet" href="slide_banner/slick.css"> <!-- メイン上部カルーセルバナー -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Merriweather"> <!-- webフォント -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.js"></script>
<script src="drawer/drawer.js"></script> <!-- ドロワーアニメーション -->
<script src="slide_banner/slick.min.js"></script> <!-- メイン上部カルーセルバナー -->
<script src="iframe_autoheight/jquery.browser.js"></script> <!-- iframe高さ調節 -->
<script src="iframe_autoheight/jquery-iframe-auto-height.min.js"></script> <!-- iframe高さ調節 -->


<script>
//jQuery 3.2.1は"$"で、
//jQuery 1.6.1は"$161"で呼び出せるようにする
var $161 = $.noConflict(true);

$(function(){

  setTimeout(function(){
    //jQuery 1.6.1でアクセスする要素は、$の代わりに$161でアクセスする
    $161("iframe[src='main.htm']").iframeAutoHeight();
  }, 1000);

  setTimeout(function(){
    $161("iframe[src='footer.htm']").iframeAutoHeight();
  }, 1000);

});
</script>

<script>
$(function() {
  //jQuery 3.2.1でアクセスする要素はそのまま
  $('.center-item').slick({
    infinite: true,
    dots:true,
    slidesToShow: 1,
    centerMode: true,
    centerPadding:'0',
    autoplay:true,
    responsive: [{
      breakpoint: 480,
      settings: {
        centerMode: false,
      }
    }]
  });
});
</script>


</head>
<body>

      <header>
      <div id="head_flex">
	<div class="left">&nbsp;</div>
	<div class="center"><img src="img/logo.png"></div>
	<div class="right">
	<div class="drawer_menu">

		<div class="drawer_bg"></div>
		<button type="button" class="drawer_button">
			<span class="drawer_bar drawer_bar1"></span>
			<span class="drawer_bar drawer_bar2"></span>
			<span class="drawer_bar drawer_bar3"></span>
			<span class="drawer_menu_text drawer_text">MENU</span>
			<span class="drawer_close drawer_text">CLOSE</span>
		</button>
		<nav class="drawer_nav_wrapper">
		<iframe src="https://www.rakuten.ne.jp/gold/loopsky/sptest/drawer.htm" scrolling="yes" width="100%" height="100%" frameborder="0"></iframe>
		</nav>
	</div>
	</div>
      </div>
      </header>


      <ul class="slider center-item">
	<li><img src="https://www.rakuten.ne.jp/gold/loopsky/header_wideslider/img/index/key-performax01.jpg"></li>
	<li><a href="https://item.rakuten.co.jp/loopsky/organdy-curtain/"><img src="https://www.rakuten.ne.jp/gold/loopsky/header_wideslider/img/index/key-curtain.jpg"></a></li>
	<li><a href="https://item.rakuten.co.jp/loopsky/tbstl-15/"><img src="img/slide/tbstl-15.jpg"></a></li>
	<li><a href="https://item.rakuten.co.jp/loopsky/as-282sbr/"><img src="img/slide/as-282sbr.jpg"></a></li>
	<li><a href="https://item.rakuten.co.jp/loopsky/52551/"><img src="img/slide/52551.jpg"></a></li>
	<li><a href="https://item.rakuten.co.jp/loopsky/52820/"><img src="img/slide/52820.jpg"></a></li>
      </ul>


      <iframe src="main.htm" scrolling="no"></iframe>
      <iframe src="footer.htm" scrolling="no"></iframe>


</body>
</html>

1.6.1に関するJSの記述をせず下記の記述だけの場合、ドロワー、スライドバナーは問題なく作動します。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.js"></script>

<script>
$(function() {
  //jQuery 3.2.1でアクセスする要素はそのまま
  $('.center-item').slick({
    infinite: true,
    dots:true,
    slidesToShow: 1,
    centerMode: true,
    centerPadding:'0',
    autoplay:true,
    responsive: [{
      breakpoint: 480,
      settings: {
        centerMode: false,
      }
    }]
  });
});
</script>

下記を追記すると、ドロワーは問題ありませんが、スライドバナーの左右のボタンを押したときにアニメーションが動作しません。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.js"></script>

下記も追加すると、iframeの高さ調整ができるようになり、ドロワーも問題ありませんが、スライドバナーの画像が縦に並んだレイアウトになってしまいます。

<script>
//jQuery 3.2.1は"$"で、
//jQuery 1.6.1は"$161"で呼び出せるようにする
var $161 = $.noConflict(true);

$(function(){

  setTimeout(function(){
    //jQuery 1.6.1でアクセスする要素は、$の代わりに$161でアクセスする
    $161("iframe[src='main.htm']").iframeAutoHeight();
  }, 1000);

  setTimeout(function(){
    $161("iframe[src='footer.htm']").iframeAutoHeight();
  }, 1000);

});
</script>

kei344

2018/11/10 07:58

（質問文は編集できます）質問文のコードはコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。

行動規範の内容に同意します

回答1件

ベストアンサー

回答

以下のようにすると、解決できます。

HTML
1<!-- jQuery 1.6.1とjQuery 1.6.1で扱うプラグイン -->
2<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.js"></script>
3<script src="iframe_autoheight/jquery.browser.js"></script>
4<script src="iframe_autoheight/jquery-iframe-auto-height.min.js"></script>
5
6<script>
7//jQuery 1.6.1は"$161"で呼び出せるようにする
8var $161 = $.noConflict(true);
9</script>
10
11<!-- jQuery 3.2.1とjQuery 3.2.1で扱うプラグイン -->
12<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
13<script src="drawer/drawer.js"></script>
14<script src="slide_banner/slick.min.js"></script>
15
16<script>
17$(function(){
18
19  setTimeout(function(){
20    //jQuery 1.6.1でアクセスする要素は、$の代わりに$161でアクセスする
21    $161("iframe[src='main.htm']").iframeAutoHeight();
22  }, 1000);
23
24  setTimeout(function(){
25    $161("iframe[src='footer.htm']").iframeAutoHeight();
26  }, 1000);
27
28});
29</script>
30
31<script>
32$(function() {
33  //jQuery 3.2.1でアクセスする要素はそのまま
34  $('.center-item').slick({
35    infinite: true,
36    dots:true,
37    slidesToShow: 1,
38    centerMode: true,
39    centerPadding:'0',
40    autoplay:true,
41    responsive: [{
42      breakpoint: 480,
43      settings: {
44        centerMode: false,
45      }
46    }]
47  });
48});
49</script>

補足 - $.noConflict()について

質問者が挙げている参考サイトのように、$.noConflict()を使用することで、複数バージョンのjQueryを共存させることができます。

$.noConflict()の基本的な使い方は、以下の通りです。

１．jQueryを読み込む。読込時、変数$で扱うバージョンを先に読む込むこと。

HTML
1<!-- 変数$で扱うバージョンを先頭に記述する -->
2<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
3<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.js"></script>

２．スクリプトの先頭で、$.noConflict()を呼び出す。

JavaScript
1var $161 = $.noConflict(true);
2
3console.log($161.fn.jquery);    //1.6.1
4console.log($.fn.jquery);       //3.2.1
5console.log(jQuery.fn.jquery);  //3.2.1

なお、$.noConflict()の第1引数にはtrueを指定しておいた方が良いです。これは、trueを指定しないと、変数jQueryが書き換えられないからです。

JavaScript
1var $161 = $.noConflict();  //引数未指定
2
3console.log($161.fn.jquery);    //1.6.1
4console.log($.fn.jquery);       //3.2.1
5console.log(jQuery.fn.jquery);  //1.6.1 ← $と異なり書き換えられていない

投稿2018/11/10 14:00

編集2018/11/12 10:12

退会済みユーザー

総合スコア0

ringoppi

2018/11/10 22:23

丁寧な解説ありがとうございます。テストしたところ、2つのjQueryを読み込むことはできているようです。しかしながらjQuery 1.6.1に関連するiframeAutoHeightで、2つのifameの中身は表示できたものの（以前はできなかった）表示幅によって余白ができたり欠けたりしており、 iframeAutoHeight(); }, 1000); の1000の方を読み込んでいるような感じに見えます。 iframeAutoHeightの単体だけでテストすると、iframeの中身にちょうど良いサイズのiframe高さになるのですが。何か他の原因でしょうか...？

ringoppi

2018/11/10 22:32

何度もコピペしなおして試していたら、今度はiframeAutoHeightは問題なく、代わりにjQuery 3.2.1に関連するスライドバナーのレイアウトが崩れてしまいました。同じjQuery 3.2.1に関連するドロワーは問題ないのですが、記述順序が問題なのでしょうか。。。

退会済みユーザー

2018/11/11 01:46

＞1000の方を読み込んでいるような感じに見えます。 1000はsetTimeoutの引数なので、コピペミスか勘違いと思われます。＞iframeAutoHeightの単体だけでテストするとこれは、setTimeoutを使用しなかったという意味でしょうか？＞何度もコピペしなおして試していたら、今度はiframeAutoHeightは問題なく、代わりにjQuery 3.2.1に関連するスライドバナーのレイアウトが崩れてしまいましたコピペによる編集中にコードに不具合が発生したのではないかと思います。コメントいただきましたが、漠然とした内容が多く、ringoppiさんが試したことが正確に分かりません。試したことを、実際に動かしたコードと共に質問に追記するようお願いします。（追記の際、kei344さんが指摘している事項も修正してください。）なお、追記の際は、HTML・CSSの情報も記載してください。iframeAutoHeightが正常に動作しないのは、もはやjQueryのバージョン共存に関する問題とは別の原因であると考えられます。こうなると、JavaScriptのコードだけでは解決できないからです。

ringoppi

2018/11/12 02:20

RYNO様、説明がわかりにくく申し訳ございませんでした。できる限りわかりやすく追記したつもりです。大変お手数ですがご確認いただければ幸いです。

退会済みユーザー

2018/11/12 10:14

質問の修正ありがとうございます。回答を修正しましたのでご確認をお願いいたします。プラグインを使用している場合、それを考慮する必要があります。（初版では考慮し忘れていました。すみません。）

ringoppi

2018/11/13 00:23

修正していただいたコードで正常に動作しました。迅速なご対応ありがとうございました！

行動規範の内容に同意します