load()を利用したときのコード

load_short_cord_test
https://hivepress.with-wanko.com/listing/short-code-test/
・アイコンが表示されない
・CSSも効いているのでその他の挙動はおおむね大丈夫

<style>
	.page_wrapper{border:1px solid black;}
	.page_wrapper .hp-listing__title{display:none;}
	.page_wrapper .hp-listing__images{width: 23%; display:flex;}
</style>

<h1>load()で別ページの内容をここ↓↓に表示</h1>
<div id="idLoadLlink" class="page_wrapper">
ここに表示
</div>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
    $("#idLoadLlink").load("/listing/%%id_name:stylish-remodeled-room%%/ .hp-page__content");
	  $(function(){
	      let items = {
			あいこん1: '<img src="https://hivepress.with-wanko.com/wp-content/uploads/2023/10/ICON-1.png">',
			あいこん2: '<img src="https://hivepress.with-wanko.com/wp-content/uploads/2023/10/ICON02.png">',
			あいこん3: '<img src="https://hivepress.with-wanko.com/wp-content/uploads/2023/10/ICON03.png">'
			};
			let keys = Object.keys(items);

			jQuery(document).ready(function ($) {
			$(".hp-listing__attribute").each(function(i, v) {
				let outer = $(this);
				let text = $(this).text();

				if (doesLineContainKeys(text, keys)) {
					$.each(items, function(key, value) {
						text = text.replace(key, value);
					});
					text = text.replace(/,/g, '');
					outer.html(text);
				}
			});

			function doesLineContainKeys(line, keys) {
				for (let i = 0; i < keys.length; i++) {
					if (line.indexOf(keys[i]) !== -1) {
						return true;
					}
				}
				return false;
			}
		});       
	});  
});
</script>

fetch()を利用したときのコード

fetch_short_cord_test
https://hivepress.with-wanko.com/listing/short-cord-test2/
・挙動がおかしい
・ヘッダーのリンクなどもクリックできなくなる
・アイコンは表示される

<style>
	#loadArea-2{border:1px solid black;}
	.page_wrapper .hp-listing__title{display:none;}
	.page_wrapper .hp-listing__images{width: 23%; display:flex;}
</style>

<h1>fetch()別ページの内容をここ↓↓に表示</h1>
<div id="loadArea-2" class="page_wrapper"></div>

<script>
    window.addEventListener('DOMContentLoaded', function(){
        fetch('https://hivepress.with-wanko.com/listing/%%post_name:stylish-remodeled-room%%/') //ロード元URL
        .then(data => data.text())
        .then(html => document.getElementById('loadArea-2').innerHTML = html) //ロード先ID指定
		  .then(() => {
         let items = {
			あいこん1: '<img src="https://hivepress.with-wanko.com/wp-content/uploads/2023/10/ICON-1.png">',
			あいこん2: '<img src="https://hivepress.with-wanko.com/wp-content/uploads/2023/10/ICON02.png">',
			あいこん3: '<img src="https://hivepress.with-wanko.com/wp-content/uploads/2023/10/ICON03.png">'
			};
			let keys = Object.keys(items);

			jQuery(document).ready(function ($) {
			$(".hp-listing__attribute").each(function(i, v) {
				let outer = $(this);
				let text = $(this).text();

				if (doesLineContainKeys(text, keys)) {
					$.each(items, function(key, value) {
						text = text.replace(key, value);
					});
					text = text.replace(/,/g, '');
					outer.html(text);
				}
			});

			function doesLineContainKeys(line, keys) {
				for (let i = 0; i < keys.length; i++) {
					if (line.indexOf(keys[i]) !== -1) {
						return true;
					}
				}
				return false;
			}
		});               
	 });
   });
</script>

Comments

Leave a Reply

Your email address will not be published. Required fields are marked *

Sign In

Register

Reset Password

Please enter your username or email address, you will receive a link to create a new password via email.