( 前のトピック | 次のトピック )

IE11のみGNAVIモジュールがadsense広告と競合する

  • このフォーラムに新しいトピックを立てることはできません
  • このフォーラムではゲスト投稿が禁止されています

1件表示 (全1件) すべてのトピック一覧へ

投稿ツリー


ツリー構造順で表示 投稿の新しいものから


なし IE11のみGNAVIモジュールがadsense広告と競合する

msg# 1
前の投稿 - 次の投稿 | 親投稿 - 子投稿なし | 投稿日時 2017/1/30 23:37 | 最終変更
タツ  管理人   投稿数: 2447
不具合の症状
このホームページで掲載しているXOOPSモジュールのGNAVIで、何気にインターネットエクスプローラ11で見ると地図表示で右の題名をクリックしても正常に情報ウインドウが表示されないことに気付きました。他のブラウザ　Firefox、Google chrome、Microsoft Edgeでは問題なく表示されます。

原因
原因はやはりというか以前にも問題となっていたadsense広告との競合です。広告を外せば正常に表示されます。競合の1つの解消方法はInternet Explorerだけ途中でフリーズするで掲載しましたが、既に処理済みで効果はありません。

対策
単純にadsense飲む広告を外せば解決するものの、なぜ地図表示で情報ウインドウが正常に表示されないのかという問題を解決する必要があると思い調べてみました。その結果今回の件は、GNAVIモジュールのmap.jsにてJavascriptのprototypeを利用したAjaxで地図のデータをkmlから取得しているのですが、取得後、子ノードの要素を取得する際にインターネットエクスプローラ11だけタグ内の内容を分断して取得するため現プログラムでは一部しか取得できないことが原因です。例えば1つのname要素としての題名「高知県 ひろめ市場」が分断され、「高知県」、「ひろめ」、「市場」と3つの要素になり、最初の「高知県」しか取得していないのです。

この対策として一括して取得する方法がスマートな方法であろうかと思いますが、自分の能力ではmap.jsを編集するしかなかったので記録として残しておきたいと思います。ついでにと言ってはなんですが、この先競合して不具合が出るとややこしいのでAjaxの部分もJavascriptのprototypeからjQueryへ変更しました。そもそもホームページを表示するためにjquery.min.jsは利用していたのでそのまま利用可能です。また、Gnaviモジュールlightboxの改良にてlightboxも既にjQuery仕様に変更しているのでprototypeは外すことにしました。問題ないと思われます。


次にその手順です

html/modules/gnaviの変更名/js/map.jsの262行目辺りprototypeのAjaxを
function searchSales(){

	// get markers by kml

	var k = gn_url+'/kml.php?mime=xml&'+gn_ulop;

	var opt = {
			method: 'GET',
			asynchronous: true,
			onComplete: func2
	};
	new Ajax.Request( k, opt );

}

jQueryのAjaxに変更します

function searchSales(){

	// get markers by kml
	
	jQuery.ajax({
			url:gn_url + "/kml.php?mime=xml&" + gn_ulop,
			type: "GET",
			async: true,
			dataType: "xml",
			complete: func2 
	});
	
}

次に311行目辺り、IE11対策として分断される要素（name、description）をまとめます。

var nl = req.responseXML.getElementsByTagName( 'Placemark' );

	var lst='';

	for( var i = 0; i < nl.length; i++ ) {
		var nli = nl[ i ];
		var lid = eval(nli.getElementsByTagName( 'lid' )[0].firstChild.nodeValue);
		var name = nli.getElementsByTagName( 'name' )[0].firstChild.nodeValue;
		var description = nli.getElementsByTagName( 'description' )[0].firstChild.nodeValue;

		// setup list
		lst += "<li><a href='java script:void(0)' onclick='go("+lid+")'>"+name+"</a></li>";

		// setup infowindow
		var u='';
		if(gn_ulop) u = "&" + gn_ulop ;
		gn_desc[lid]="<div style='width:250px;'><a href='"+gn_url+"/index.php?lid="+lid+u+"'>"+name+"</a><br />"+description+"</div>";

	}

この部分を次のように変更

var nl = req.responseXML.getElementsByTagName( 'Placemark' );

        var lst='';

	for( var i = 0; i < nl.length; i++ ) {
		var nli = nl[ i ];
		var lid = eval(nli.getElementsByTagName( 'lid' )[0].firstChild.nodeValue);

		
		//nameの取得
		var name='';
		var childname_data = nli.getElementsByTagName( 'name' )[0].childNodes;
		if(childname_data.length > 1){

			//IE11対策　nametagが分割するため結合させる
		         for( var j = 0; j < childname_data.length; j++ ) {
			 name  = name + childname_data[j].nodeValue;
			　}
		}
	        else
		{
		         name = childname_data[0].nodeValue;
		}

		//descriptionの取得
		var description='';
		var childdescription_data = nli.getElementsByTagName( 'description' )[0].childNodes;
		if(childdescription_data.length > 1){

			//IE11対策　descriptionが分割するため結合させる
			//childdescription_data[0].nodeValueは定義されていないので省略
		         for( var j = 1; j < childdescription_data.length-1; j++ ) {
			 description  = description + childdescription_data[j].nodeValue;
			　}
		}
	        else
		{
		         description = childdescription_data[0].nodeValue;
		}
		
		// setup list
		lst += "<li><a href='java script:void(0)' onclick='go("+lid+")'>"+name+"</a></li>";

		// setup infowindow
		var u='';
		if(3) u = "&" + gn_ulop ;
		gn_desc[lid]="<div style='width:290px;'><a href='"+gn_url+"/index.php?lid="+lid+u+"'>"+name+"</a><br />"+description+"</div>";

	}

さらに同じく348行目辺り、IE11対策として分断される要素（coordinates）をまとめます。


if (nl.length > 0) {
		var minLat = 90;
		var minLng = 180;
		var maxLat = -90;
		var maxLng = -180;
	
		for( var i = 0; i < nl.length; i++ ) {
			var nli = nl[ i ];
			var lid = eval(nli.getElementsByTagName( 'lid' )[0].firstChild.nodeValue);
			var icd = eval(nli.getElementsByTagName( 'icd' )[0].firstChild.nodeValue);
			var coordinates = nli.getElementsByTagName( 'coordinates' )[0].firstChild.nodeValue;
	
			var p = coordinates.split(",");
			var ll = new google.maps.LatLng(p[1], p[0]);
			
			if (gn_autozoom) {
				minLat =  Math.min(minLat, p[1]);
				minLng =  Math.min(minLng, p[0]);
				maxLat =  Math.max(maxLat, p[1]);
				maxLng =  Math.max(maxLng, p[0]);
			}
			
			// setup marker in map

この部分を次のように変更
	if (nl.length > 0) {
		var minLat = 90;
		var minLng = 180;
		var maxLat = -90;
		var maxLng = -180;
	
		for( var i = 0; i < nl.length; i++ ) {
			var nli = nl[ i ];
			var lid = eval(nli.getElementsByTagName( 'lid' )[0].firstChild.nodeValue);
			var icd = eval(nli.getElementsByTagName( 'icd' )[0].firstChild.nodeValue);
			
			var coordinates='';
			var childcoordinates_data = '';
			childcoordinates_data = nli.getElementsByTagName( 'coordinates' )[0].childNodes;
			if(childname_data.length > 1){

				//IE11対策　coordinatestagが分割するため結合させる
			         for( var j = 0; j < childcoordinates_data.length; j++ ) {
				 coordinates  = coordinates + childcoordinates_data[j].nodeValue;
				　}
			}
		        else
			{
			         coordinates = childcoordinates_data[0].nodeValue;
			}
			
			var p = coordinates.split(",");
			var ll = new google.maps.LatLng(p[1], p[0]);
			
			if (gn_autozoom) {
				minLat =  Math.min(minLat, p[1]);
				minLng =  Math.min(minLng, p[0]);
				maxLat =  Math.max(maxLat, p[1]);
				maxLng =  Math.max(maxLng, p[0]);
			}
			
			// setup marker in map


xoops_trust_path/modules/gnavi/main/map.phpの217行目辺りで
prototype.jsを削除します


$xoops_module_header = $xoopsTpl->get_template_vars( "xoops_module_header" ) ."\n" ."<script src='".$gnavi_googlemap_url."/maps/api/js?sensor=false' type='text/javascript' charset='utf-8'></script>
<link rel='stylesheet' type='text/css' href='css/gnavi.css'/>
<script src='js/map.js' type='text/javascript' charset='utf-8'></script>
<script src='js/prototype.js'></script>
<script type='text/javascript'>
//<![CDATA[
	$gnavi_lang_java
	$mykmls
	gn_url = '$mod_url';
	gn_ulop = '$get_append';
	gn_l=$lid;
	gn_ep = ".( $global_perms & GNAV_GPERM_INSERTABLE )." ;
	gn_drkm = $gnavi_map_draw ;
	gn_autozoom = ".(@ $gnavi_configs['gnavi_map_autozoom']? 'true' : 'false')."
	google.maps.event.addDomListener(window, 'load', function(){ ShowGMap(); });
	".($gnavi_pe_appkey==""?"":"gn_pekey='".$gnavi_pe_appkey."';")."
//]]>
</script>";



$xoops_module_header = $xoopsTpl->get_template_vars( "xoops_module_header" ) ."\n" ."<script src='".$gnavi_googlemap_url."/maps/api/js?sensor=false' type='text/javascript' charset='utf-8'></script>
<link rel='stylesheet' type='text/css' href='css/gnavi.css'/>
<script src='js/map.js' type='text/javascript' charset='utf-8'></script>
<script type='text/javascript'>
//<![CDATA[
	$gnavi_lang_java
	$mykmls
	gn_url = '$mod_url';
	gn_ulop = '$get_append';
	gn_l=$lid;
	gn_ep = ".( $global_perms & GNAV_GPERM_INSERTABLE )." ;
	gn_drkm = $gnavi_map_draw ;
	gn_autozoom = ".(@ $gnavi_configs['gnavi_map_autozoom']? 'true' : 'false')."
	google.maps.event.addDomListener(window, 'load', function(){ ShowGMap(); });
	".($gnavi_pe_appkey==""?"":"gn_pekey='".$gnavi_pe_appkey."';")."
//]]>
</script>";

以上です。
投票数:26 平均点:3.46
1件表示 (全0件) すべてのトピック一覧へ

ツリー構造順で表示 投稿の新しいものから


     条件検索へ

旅と気ままなフォーラム最新投稿

欲しい商品が必ず見つかるメジャーなネットショップ

ログイン

オンライン状況

137 人のユーザが現在オンラインです。 - 22 人のユーザが 旅と気ままなフォーラム を参照しています。.

登録ユーザ 0 ゲスト 137

Facebook,RSSリンク表示

検索

アクセスカウンタ

今日 : 209
昨日 : 285
総計 : 1754387