首页 > 代码库 > 跨页面操作错误

跨页面操作错误

 

本期错误】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中,如图:

技术分享

 

跨页面操作错误