【網頁前端】用AJAX呼叫的網頁會受到父層頁面的css影響嗎?

ajax

終葉 2018-06-15 02:21:58 ‧ 1455 瀏覽

分享至

不知道標題這樣下對不對...如果錯了還請不吝指教m(_ _)m

是這樣的，小弟工作的公司網頁手機版及電腦版是分開製作的。
由於這部分沒有後台的緣故，公司商品頁面必須由人工一項一項去KEY上去。
只要企劃專員告知今日商品價格浮動或是售完我們就必須手動修改
但是這就產生了一個問題，常常電腦版改了卻忘了改手機版。
於是最近跟其他同事討論過後想試試用AJAX把產品的部分另外崁入
目前的網站狀態是
電腦版網頁上頭比較複雜，手機版較簡單。
電腦版的商品陳列方式為瀑布流，手機版則是條列式，按鈕的排版上也不同。
除了各自有各自的css外，還在不同的空間底下。
兩者下方都有精選商品區(以輪播圖呈現)這一區的話CSS是想要不要直接寫在產品頁中...兩邊基本上這一塊長得差不多

會插入Ajax的網頁先稱為" 商品頁面.html "
商品頁面.html中用Ajax呼叫的網頁稱為" 商品.html "

商品.html只寫HTML結構不寫CSS
直接把CSS分開個別崁入在商品頁面.html的電腦頁面跟手機頁面
Ajax呼叫的商品.html會各別去讀該頁面的CSS嗎?

EX:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>商品.html</title>
<style>
	#owl-demo .item{ margin: 3px; }
	#owl-demo .item img{ display: block; width: 100%; height: auto;}
</style>

</head>

<body>
<!--商品-->
<div class="shop">
	<div><img></div>
	<h1>商品名稱</h1>
	<p>介紹</p>
	<h2>價格</h2>
	<div>立即購買</div>
</div>
	

<!--精選商品-->	
<div id="owl-demo">
  <div class="item"><img src=" "></div>
  <div class="item"><img src=" "></div>
  <div class="item"><img src=" "></div>
  <div class="item"><img src=" "></div>
</div>	
<script>
$(document).ready(function() {
 
  $("#owl-demo").owlCarousel({
 
      autoPlay: 3000, //Set AutoPlay to 3 seconds
 
      items : 4,
      itemsDesktop : [1199,3],
      itemsDesktopSmall : [979,3]
 
  });
 
});    </script>
</body>
</html>

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>電腦版-商品頁面.html</title>
<style>
	.shop{ width: 100%; max-width: 350px; margin: 1em; float: left; border:1px solid #ddd; border-radius: 15px; box-shadow: 0 3px 2px rgba(0,0,0,0.3); overflow: hidden;}
	.shop>div>img{ width: 100%; height: 200px; margin-top: 1em; }
	.shop>div:nth-child(2){ padding:0 0.8em; }
	.shop>div:nth-child(2)>h1{font-size: 1.5em; border-bottom: 1px dashed #ddd; padding-bottom: 0.4em;}
	.shop>div:nth-child(2)>h2{ text-align: right; color: red;}
	.shop>div:nth-child(3){ background:#FFFECB; font-size: 1.2em; text-align: center; line-height: 2;}
</style>
</head>

<body>
<div id="iframe"></div>

<script type="text/javascript">
$(document).ready(function(){ 
$.get("商品.html",function(data){
$("#iframe").html(data);
}); 
});
</script>
</body>
</html>

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

2 個回答

froce

iT邦大師 1 級 ‧ 2018-06-15 06:31:19

去學RWD，要不然去用bootstrap。
css是可以根據不同畫面大小去切換版面的。
css父頁面的css會影響到ajax接回來的DOM。反之我沒試過，不過應該也會。

另外，ajax接回來的html結構不需要block和tag這兩個。你商品.html可以這樣改：

<div class="shop">
	<div><img></div>
	<h1>商品名稱</h1>
	<p>介紹</p>
	<h2>價格</h2>
	<div>立即購買</div>
</div>
	

<!--精選商品-->	
<div id="owl-demo">
  <div class="item"><img src=" "></div>
  <div class="item"><img src=" "></div>
  <div class="item"><img src=" "></div>
  <div class="item"><img src=" "></div>
</div>	
<script>
$(document).ready(function() {
 
  $("#owl-demo").owlCarousel({
 
      autoPlay: 3000, //Set AutoPlay to 3 seconds
 
      items : 4,
      itemsDesktop : [1199,3],
      itemsDesktopSmall : [979,3]
 
  });
 
});    </script>

ajax不是iframe，他不是完整的網頁，而是動態新增在父網頁裡，所以不需要完整的網頁結構。