Невозможно изменить содержимое в HTML-объект из тега привязки

Question

Невозможно изменить содержимое в HTML-объект из тега привязки

0

Работая над решением для клиента, где они хотят иметь три веб-сайтов в одном окне браузера, взаимодействовать с ними, не требуя отображения нескольких окон. Первоначально я думал, что iframes будет работать, но используемое программное обеспечение каким-то образом отключает эту функциональность, поэтому после некоторых исследований я обнаружил, что объекты могут выполнять аналогичную функцию.

Одна из проблем, с которыми я сталкиваюсь, заключается в том, что я хочу иметь возможность иметь подзаголовки, чтобы их содержимое изменялось в зависимости от действий в другом объекте. Например, если у меня есть ссылка в объекте три, чтобы загрузить ссылку на объект два, я мог бы. Однако мне не очень повезло, когда они общаются друг с другом. Кто-нибудь знает, каким образом это может быть достигнуто, если это вообще возможно?

Текущий код, с которым я работаю, для выполнения этого действия.

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

И внутри объекта frameThree,

<!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, на которое ссылается, не найден.

canadiancreed 21 окт. 2013, в 21:55

Источник

1

«Первоначально я думал, что iframes будет работать, но используемое программное обеспечение как-то отключает эту функцию» - Что такое «используемое программное обеспечение» здесь? Для вашего первоначального описания того, что вы пытаетесь сделать, я бы тоже пошел с iframes.
nnnnnn 21 окт. 2013, в 19:33

Теги:

javascript

html

1 ответ

Ещё вопросы

«Первоначально я думал, что iframes будет работать, но используемое программное обеспечение как-то отключает эту функцию» - Что такое «используемое программное обеспечение» здесь? Для вашего первоначального описания того, что вы пытаетесь сделать, я бы тоже пошел с iframes.

jfriend00 · Accepted Answer · 2013-10-21T18-29-00.000Z

Из -за защиты одного и того же происхождения в браузере вы не можете манипулировать контентом в разных доменах. Поэтому из одного домена вы не можете попасть в другое содержимое сайта (в фрейме или 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-код, который он отображает при изменении атрибута данных. Я не знаю, является ли это умышленным или нет». Да, я хотел получить его там, где, если Я нажал на одну ссылку в одном объекте, это изменило бы содержимое html в другом объекте. По тому, как это звучит, это не выполнимо.
@canadiancreed - основанный на поведении, замеченном в браузерах, это кажется правильным. Обходной путь - использовать эту функцию для замены тега объекта идентичным тегу с новым атрибутом данных.