思考一個問題:
總共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>