【本期錯誤】Uncaught DOMException: Blocked a frame with origin "null" from accessing a cross-origin frame at HTMLAnchorElement.writeContent...
想在頁面中通過點擊不同鏈接加載不同內容到iframe中。先貼上各種代碼（代碼來自《JavaScript基礎教程 第九版》[美·Dori Smith,Tom Negrino]）：
CSS(script01.css)：
body { background-color: #FFF; } iframe#icontent { float: right; border: 1px solid black; width: 350px; height: 300px; margin-top: 100px; }
HTML(index.html)：
<!DOCTYPE html> <html> <head> <title>iframe 4</title> <script src="script05.js"></script> <link rel="stylesheet" href="script01.css"> </head> <body> <iframe src="iframe01.html" id="icontent" name="icontent"></iframe> <h1>Main Content Area</h1> <h2> <a href="#">Link 1</a><br> <a href="#">Link 2</a><br> <a href="#">Link 3</a> </h2> </body> </html>
iframe原始頁面(iframe01.html):
<!DOCTYPE html> <html> <head> <title>Content iframe</title> </head> <body> Please load a page </body> </html>
JavaScript(script05.js)：
window.onload = initLinks; var pageCount = new Array(0,0,0,0); function initLinks() { for (var i=0; i<document.links.length; i++) { document.links[i].onclick = writeContent; document.links[i].thisPage = i+1; } } function writeContent() { pageCount[this.thisPage]++; var newText = "<h1>You are now looking at example " + this.thisPage; newText += ".<br>You have been to this page "; newText += pageCount[this.thisPage] + " times.<\/h1>"; document.getElementById("icontent").contentWindow.document.body.innerHTML = newText; return false; }
在瀏覽器打開index.html，無論怎么點擊其中的鏈接，iframe中的內容始終不變。打開console查看原因，顯示如下：
也就是出現一開始說的那種錯誤。
跨頁面操作涉及“域”的概念。Uncaught DOMException: Blocked a frame with origin "null" from accessing a cross-origin frame at HTMLAnchorElement.writeContent... 在這里，origin是“域”的意思，cross-origin是“跨域”。全句意思：阻止了一個域為“null”的frame頁面訪問一個 跨域的frame頁面...
跨域問題是指當前域名的js只能讀取同域下的窗口屬性。產生跨域問題的原因：一個網站的網址組成包括協議名，子域名，主域名，端口號。比如 https://github.com/ ，其中https是協議名，www是子域名，github是主域名，端口號是80，當在在頁面中從一個url請求數據時，如果這個url的協議名、子域名、主域名、端口號任意一個有一個不同，就會產生跨域問題（轉自腳本之家）。
解決跨域問題的方法有幾種，而在我所遇到的這個跨域問題的解決方法很簡單，只需把所有代碼都放到服務器下執行就可以了。解決問題后可成功點擊各鏈接加載不同內容帶iframe中，如圖：
