load()を利用したときのコード
load_short_cord_test
https://hivepress2.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://hivepress2.with-wanko.com/wp-content/uploads/2023/10/ICON-1.png">',
あいこん2: '<img src="https://hivepress2.with-wanko.com/wp-content/uploads/2023/10/ICON02.png">',
あいこん3: '<img src="https://hivepress2.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://hivepress2.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://hivepress2.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://hivepress2.with-wanko.com/wp-content/uploads/2023/10/ICON-1.png">',
あいこん2: '<img src="https://hivepress2.with-wanko.com/wp-content/uploads/2023/10/ICON02.png">',
あいこん3: '<img src="https://hivepress2.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