0

为客户开发一种解决方案，他们希望在一个浏览器窗口中拥有三个网站，以便与它们进行交互，而不必显示多个窗口。最初我认为 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>

在对象框架三内，

<!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。

4

1 回答 1

1

由于浏览器中的同源保护，您无法跨不同域操作内容。因此，如果另一个站点具有不同的域，则您无法从一个域访问另一个站点的内容（在框架或 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/

于 2013-10-21T19:35:51.800 回答