iT邦幫忙

2024 iThome 鐵人賽

DAY 10
0
JavaScript

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

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

  • 分享至 

  • xImage
  •  

前言

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

這是有可能實現的嗎?

實驗

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

iframe.contentWindow.scrollTo(0, 0);

先來看個失敗的例子
fail

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

結論

為了安全性是無法控制別人家的網站(即便只有滾動軸都不行)
沒錯這就是前端開發很常聽到的
同源政策(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>


上一篇
PM 說: 很多表格的 A4 表單 AI 能幫忙切版嗎?
下一篇
PM 說: 嵌入Youtube影片可以監聽播放完畢嗎?
系列文
PM說: RD大大,這個功能要怎麼寫啊?30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言