[已解決][PHP][javascript]定位失效

#id定位 #php #javascript #line分享

YC 2022-09-23 13:23:17 ‧ 1201 瀏覽

分享至

網頁如上圖，點擊line分享按鈕可以分享網址及介紹文字到line，我想讓被分享的人點擊連結可以讓顯示的畫面定位在指定id上，例如: 點取id=7的line分享，被分享的人點擊連結顯示以下畫面

我用的方法是在連結上加入GET資料，例:id=7 的分享連結https://......?focus_area=7
然後將接收到的資料傳給js去定位。
以下是我的程式碼的簡化版

<?php
    if (isset($_GET['focus_area'])) {
        $focus_area=$_GET['focus_area'];
    }else {
        $focus_area="top";
    }

    $n=1;
    while ($n <= 9) {
        echo '<span id="' . $n . '">';
            $link="http://line.naver.jp/R/msg/text/?介紹文字+連結?focus_area =" . $n;
            echo '<a href="' . $link . '" target="_blank"><img src="images/line.png"></a>';
            $n++;
        echo '</span>';
    }

?>


<script type="text/javascript">
    window.onload = function(){
        var focus_id='<?=$focus_area?>';
        window.location.hash = '#'+focus_id;
    }
</script>

問題: line分享後點擊連結無法定位指定位置，但是將連結用無痕開啟卻可以定位，請問各位大大可能的原因是什麼?先謝謝各位大大耐心地看完，如果有缺什麼資料或說明不好的地方會再補，謝謝!

補充:

id=7 分享出的連結是https://........php?focus_area=7
連結用無痕開啟可以定位，開第二個無痕分頁不能定位，關閉所有無痕再開啟無痕，用網址搜尋可以定位

登入發表討論

直播研討會

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

直播中

2 個回答

player

iT邦大師 1 級 ‧ 2022-09-23 14:02:27

可能是瀏覽器快取了你的PHP輸出內容？
請用下面這個在你的PHP內容輸出前
如果沒效，請另請高明

header('Expires: Thu, 01 Jan 1970 00:00:00 GMT, -1');
header('Cache-Control: no-cache, no-store, must-revalidate');
header('Pragma: no-cache');

回應 1
分享
檢舉

YC iT邦新手 5 級 ‧ 2022-09-23 14:48:57 檢舉

我剛剛試了大大的方法，放在<?php後面，但是情況沒有改變，一樣只有無痕能定位，還是很感謝player大大熱心回覆!!!
另外，我也試過<meta>清快取，一樣無效

<META HTTP-EQUIV="pragma" CONTENT="no-cache"> 
<META HTTP-EQUIV="Cache-Control" CONTENT="no-cache, must-revalidate"> 
<META HTTP-EQUIV="expires" CONTENT="0">

登入發表回應

shan33

iT邦新手 1 級 ‧ 2022-09-24 19:36:07

連結用無痕開啟可以定位，開第二個無痕分頁不能定位，關閉所有無痕再開啟無痕，用網址搜尋可以定位

沒有實際操作，有點難 Debug

如果是想捲動到當下頁面的特定區塊，也可以參考使用 <a>的用法
寫了一個簡單的範例給你參考連結

說明: 網址後面加上#name 會幫你捲動到頁面元素 id=name 的位置
ex: https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent#value
這樣的網址, 會帶你到 Value 區塊

希望有幫助

回應 3
分享
檢舉

YC iT邦新手 5 級 ‧ 2022-09-26 09:46:26 檢舉

感謝shan33大大熱心回覆!!!我一開始也是用大大的方法，但是電腦版的LINE無法判斷文字的"#"(手機版可以)，導致在LINE登入頁面會因資料傳送失敗的原因頁面全白，後來我將#改成"%23"解決這個問題，但是相對的，手機版的LINE不會將%23轉成#，導致連結網址錯誤，所以我才改用JS的window.location.hash用法。
另外，當初手機版直接在網址後面加#，一開始會自動跑到指定的位置，但是後來我在連結前加入介紹文字後就失效了(http://line.naver.jp/R/msg/text/?介紹文字+連結#7)
，以為是因為介紹文字的原因所以先刪除介紹文字，可是依舊不會自動跑到指定的位置，可能是其他原因導致的

shan33 iT邦新手 1 級 ‧ 2022-09-26 22:52:41 檢舉

感謝shan33大大熱心回覆!!!我一開始也是用大大的方法

原來!

不過蠻想知道問題在哪...

你的分享連結，是參考官方文件的作法嗎

我沒有重現出你的問題...(我有試過連結使用帶hash的網址，是可以正常帶到 hashtag 的位置的)

附上幾個測試的方向，希望對你找出問題有幫助

分享後，開啟的網頁是使用 Line 內建瀏覽器開啟還是外部瀏覽器
分享後連結網址是否完整
分享連結換成 encode 過的 URL

YC iT邦新手 5 級 ‧ 2022-09-27 11:21:44 檢舉

真的很感謝shan33大大一直幫我找原因，謝謝!!!
起先我是跟著官方文件的作法做(使用自訂圖示)，官方說明連結網址是https://social-plugins.line.me/lineit/share?url=需分享的網址，但是我想將說明文字連同網址一起分享，直接加在需分享的網址前會顯示"連結錯誤"，後來在tim大大分享的文章中得知http://line.naver.jp/R/msg/text/?介紹文字+連結可以達到我的需求，嘗試後確實可行。
另外，這篇也有說明一樣的LINE分享連結方法，不用轉編碼

針對shan33大大提出的測試方向:
1.分享後開啟的網頁，不管是使用 Line 內建瀏覽器開啟還是外部瀏覽器，僅有無痕能定位到我指定的位置
2.Line 內建瀏覽器及外部瀏覽器顯示在top的位置("#"無作用)，無痕能正常顯示，所以連結網址應該是完整的
3.試過有encode 過及無encode 過的URL，分享出的文字、連結都相同("#"一樣無作用)

最後再次感謝shan33大大的幫忙!!