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

跨页面操作错误

2024-08-31 23:17:55   220人阅读

 

【本期错误】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中，如图：

技术分享

 

跨页面操作错误


联系
我们