【JavaScript】frame跨域訪問元素

什麼是跨frame訪問元素呢？好比main.html中有以下代碼：

<frameset cols="50%,*">
  <frame src="frame1.html">
  <frame src="frame2.html">
</frameset>

若是想在frame2.html的頁面操做frame1.html中的元素，那麼經過以下的js代碼就能夠完成：

parent.frames[0].document

其中parent表示訪問main.html的文檔。frames[0]表示訪問main.html中的第一個frame對象，也就是frame1.html頁面。也能夠經過name來指定訪問特定的頁面，例如：

<frameset cols="50%,*">
  <frame name="myframe1" src="frame1.html">
  <frame name="myframe2" src="frame2.html">
</frameset>

frame2.html中的訪問代碼就能夠改成：

parent.frames["myframe1"].document

 

到這裏咱們知道了frame之間如何訪問元素，筆者這裏只是列舉了一種方法，有興趣的讀者能夠自行googling。那麼什麼是跨域訪問元素呢？

若咱們把上面main.html中的一個frame指向其它的域名地址（好比：www.google.com），那麼咱們還能正常在myframe2中操做myframe1中的元素嗎？

<frameset cols="50%,*">
  <frame name="myframe1" src="www.google.com">
  <frame name="myframe2" src="frame2.html">
</frameset>

答案是不行！在myframe2中操做myframe1中的元素，會獲得以下的錯誤信息：frame Blocked a frame with origin "null" from accessing a cross-origin frame.

瀏覽器是禁止這種行爲的。那麼有沒有什麼方法能夠實現這種操做呢？

答案是有的，解決方法有多種，筆者稍後會把連接粘貼在後面。這裏筆者說一下，筆者可行方法（就是禁用瀏覽器的安全域檢查）：

筆者的Chrome是75.0.3770.142，環境是win7。

而後使用以下的命令啓動chrome瀏覽器：

chrome.exe --disable-site-isolation-trials --disable-web-security --user-data-dir="your dir"

 

讀者能夠翻閱下面的連接，查看更詳細的說明

1.Disable same origin policy in Chrome

2.blocked a frame of origin 「null」 from accessing a cross-origin frame - chrome