PM 說: 可以嵌入其他人的網頁並控制滾動軸嗎?

2024 iThome 鐵人賽

DAY 10

JavaScript

PM說: RD大大，這個功能要怎麼寫啊?系列第 10 篇

16th鐵人賽

YUAN

2024-09-07 10:00:16

221 瀏覽

分享至

前言

思考一個問題:
總共2個網站 A,B
我在A網站，使用 iframe 嵌入另一個B網站，想在A網站點按鈕返回頂部(控制B網站scrollbar)

這是有可能實現的嗎?

實驗

本次用到的語法比較少見一些

iframe.contentWindow.scrollTo(0, 0);

先來看個失敗的例子

若使用自己的同源的網站就可以正常
成功的例子

結論

為了安全性是無法控制別人家的網站(即便只有滾動軸都不行)
沒錯這就是前端開發很常聽到的
同源政策（Same-Origin Policy）
伺服器端要配合調整CSP才有可能做到

優質好文

https://ithelp.ithome.com.tw/articles/10306006

程式碼

<!DOCTYPE html>
<html lang="zh-TW">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>iframe scrollTo 失敗範例</title>
    <style>
      body {
        font-family: Arial, sans-serif;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 20px;
      }
      iframe {
        width: 88dvw;
        height: 62dvh;
        border: 1px solid #ccc;
        margin-bottom: 10px;
      }
      button {
        padding: 10px 20px;
        font-size: 16px;
        cursor: pointer;
      }
      pre {
        color: red;
      }
    </style>
  </head>
  <body>
    <h1>iframe scrollTo 失敗範例</h1>
    <iframe id="myIframe" src="https://element-plus.org/zh-CN/"></iframe>
    <button onclick="scrollIframeToTop()">滾動 iframe 到頂部</button>
    <pre>
      Uncaught SecurityError: Failed to read a named property 'scrollTo' from 'Window': 
      Blocked a frame with origin "http://xxxxxxxx" from accessing a cross-origin frame.
    </pre>

    <script>
      function scrollIframeToTop() {
        const iframe = document.getElementById("myIframe");
        iframe.contentWindow.scrollTo(0, 0);
      }
    </script>
  </body>
</html>