Question

为客户提供一个解决方案，他们希望在一个浏览器窗口中拥有三个网站，与他们进行交互，而无需显示多个窗口。最初我认为iframe会起作用，但是使用的软件会以某种方式禁用该功能，因此在做了一些研究后，我发现对象可能会起到类似的作用。

我遇到的一个问题是，我希望能够让子窗口根据另一个对象中的操作更改其内容。例如，如果我在对象3中有一个链接将链接加载到对象2中，我可以。然而，我没有太多运气让他们彼此之间进行交流。有没有人知道如果可以实现这种方式呢？

我正在使用的当前代码来执行此操作。

<html>
<head>
    <title>AAA</title>
    <script language="JavaScript">
        function doPage(targetObjectPane) {
            var objTag = document.getElementById(targetObjectPane);
            if (objTag != null) {
                objTag.setAttribute('data', 'http://www.toronto.ca/');
                alert('Page should have been changed');
            }
        }
    </script>
</head>
<body>
<div style="width:100%;height:100%;">
    <div style="float:left;width:65%;height:100%;">
        <object name="frameone" id="frameone" data="http://www.tsn.ca/" standby="loading data" title="loading" width="100%" height="100%" type="text/html">
            Alternative Content
        </object>
    </div>
    <div style="float:right;width:35%;height:100%;">
        <object name="frametwo" id="frametwo" data="http://www.cbc.ca/" standby="loading data" title="loading" width="100%" height="50%" type="text/html">
            Alternative Content
        </object>
        <object name="framethree" id="framethree" data="test.html" standby="loading data" title="loading" width="100%" height="50%" type="text/html">
            Alternative Content
        </object>
    </div>
</div>
</body>
</html>

在对象框架内3，

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <title>Insert title here</title>
</head>
<body>
<a href="#" onclick="doPage(frametwo);">Test</a>
</body>
</html>

简而言之，javascript尝试操作对象内容已经遇到了未定义的错误，因为我假设它们是单独的站点，它们都不能看到彼此作为同一浏览器窗口的子项。 doPage的当前执行显示函数未定义。如果该功能代码移动到test.html，则找不到引用的对象名称frameTwo。

Answer 1

由于浏览器中的same-origin protections，您无法跨不同域操纵内容。因此，从一个域中，如果其他站点具有不同的域，则无法访问其他站点的内容（在框架或iframe中）。

看看你的代码，我想你可能想要这个：

<a href="#" onclick="doPage(frametwo);">Test</a>

是这样的：

<a href="#" onclick="doPage('frametwo');">Test</a>

因为"frametwo"需要作为字符串传递给doPage('frameTwo')。

当我尝试您的代码时，我发现<object>不会更改数据属性更改时显示的HTML。我不知道这是不是设计。但是，如果您使用新数据引用创建一个新的<object>并将其插入以替换之前的数据引用，它确实如下：

function doPage2(targetObjectPane) {
    var objTag = document.getElementById(targetObjectPane);
    if (objTag) {
        // create new object tag with new data reference
        var newObj = document.createElement("object");
        newObj.width = "100%";
        newObj.height = "50%";
        newObj.data = "http://www.toronto.ca/";
        newObj.type = "text/html";
        newObj.id = "frametwo";
        newObj.name = "frametwo";
        // insert new object tag
        objTag.parentNode.insertBefore(newObj, objTag);        
        // remove old object tag
        objTag.parentNode.removeChild(objTag);
    }
}

工作演示：http://jsfiddle.net/jfriend00/K7r32/

无法从锚标记更改html对象中的内容

1 个答案: