1. Trang chủ
  2. Câu hỏi và trả lời
  3. Thay đổi nội dung dữ liệu trên Thẻ đối tượng trong HTML

Thay đổi nội dung dữ liệu trên Thẻ đối tượng trong HTML

2009-03-24 32 views
14

Tôi có trang HTML chứa thẻ Đối tượng để lưu trữ trang HTML được nhúng.Thay đổi nội dung dữ liệu trên Thẻ đối tượng trong HTML

<object style="border: none;" standby="loading" id="contentarea" 
width="100%" height="53%" type="text/html" data="test1.html"></object>

Tuy nhiên, tôi cần phải thay đổi trang HTML trong thẻ đối tượng. Mã hiện tại dường như tạo một bản sao của đối tượng và thay thế đối tượng hiện tại bằng đối tượng đó, như vậy:

function changeObjectUrl(newUrl) 
{ 
    var oContentArea = document.getElementById("contentarea"); 
    var oClone = oContentArea.cloneNode(true); 
    oClone.data = newUrl; 

    var oPlaceHolder = document.getElementById("contentholder"); 
    oPlaceHolder.removeChild(oContentArea); 
    oPlaceHolder.appendChild(oClone); 
}

Điều này có vẻ hơi kém. Có ai biết cách 'thay đổi' trang nhúng?

Cảm ơn!

EDIT: Để trả lời câu trả lời bên dưới, đây là nguồn đầy đủ cho trang tôi hiện đang sử dụng. Sử dụng setAttribute dường như không thay đổi nội dung của thẻ Object.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html> 
<head> 
<title>Test</title> 
<script language="JavaScript"> 
function doPage() 
{ 
    var objTag = document.getElementById("contentarea"); 
    if (objTag != null) 
    { 
     objTag.setAttribute('data', 'Test2.html'); 
     alert('Page should have been changed'); 
    } 
} 
</script> 
</head> 
<body> 
<form name="Form1" method="POST"> 
<p><input type="button" value="Click to change page" onclick="doPage();" /></p> 
<object style="visibility: visible; border: none;" standby="loading data" id="contentarea" title="loading" width="100%" height="53%" type="text/html" data="test1.html"></object> 
</form> 
</body> 
</html>

Trang Test1.html và Test2.html chỉ là các trang HTML đơn giản hiển thị văn bản 'Test1' và 'Test2' tương ứng.

Nguồn

2009-03-24 Tim C

Trả lời

2

Đây là cách cuối cùng tôi đã đạt được nó. Bạn có thể làm

document.getElementById("contentarea").object.location.href = url;

hoặc có thể

document.getElementById("contentarea").object.parentWindow.navigate(url);

Yếu tố đối tượng cũng có một tài sản 'readyState' mà có thể được sử dụng để kiểm tra xem các trang chứa là 'bốc' hoặc 'hoàn toàn'.

Nguồn

2009-03-31 15:28:46

+7

Điều này đã không làm việc cho tôi. Cả hai 'object.location' và' object.parentWindow' đều không xác định. –

8

Bạn có thể làm điều đó với setAttribute

document.getElementById("contentarea").setAttribute('data', 'newPage.html');

EDIT: Nó cũng được khuyến cáo bạn nên sử dụng window.onload để đảm bảo rằng các DOM đã được nạp, nếu không bạn sẽ không thể truy cập vào đối tượng bên trong nó .

Nó có thể là một cái gì đó như thế này:

function changeData(newURL) { 
    if(!document.getElementById("contentarea")) 
     return false; 
    document.getElementById("contentarea").setAttribute('data', newURL); 
} 

window.onload = changeData;

Bạn có thể đọc thêm về window.onload here

Nguồn

2009-03-24 09:45:58 andi

+0

Tôi không thể làm việc này tại thời điểm này vì một số lý do. Đối tượng vẫn hiển thị trang cũ. Tôi sẽ đăng trang HTML đầy đủ mà tôi đang sử dụng sau này nếu tôi không có bất kỳ khoảnh khắc nào của Eureka. –

+0

Nhưng bộ chọn có hoạt động không? Nếu bạn cảnh báo (document.getElementById ("contentarea")) nó nói gì? Nếu nó nói Không xác định, thì DOM không được tải. Bạn nên sử dụng document.onload. Tôi sẽ thêm nó vào câu trả lời của tôi bởi vì các nhân vật ở đây là không đủ. – andi

+5

'setAttribute()' cũng không hoạt động đối với tôi. Giá trị thay đổi trong thanh tra dom, nhưng nội dung được hiển thị của thẻ '' không cập nhật. –

0

Thay đổi thuộc tính dữ liệu nên dễ dàng. Tuy nhiên, nó có thể không hoạt động hoàn hảo trên tất cả các trình duyệt.

Nếu nội dung luôn là HTML tại sao không sử dụng khung nội tuyến?

Nguồn

2009-03-24 10:07:14

+0

Tôi được lãnh đạo dự án của tôi nói, phần tử khung nội tuyến không được hỗ trợ trong HTML 4.1 DTD nghiêm ngặt và trong DTD XHTML 1.0 Nghiêm ngặt và vì vậy anh ấy không muốn sử dụng chúng, ý nghĩa lớn. –

+1

bạn không bao giờ nhận được bất cứ nơi nào trên một dự án, tiêu chuẩn sau đây ... –

7

Điều này có vẻ là lỗi trình duyệt, setAttribute() sẽ hoạt động. Tôi thấy việc này, mà dường như làm việc trong tất cả các trình duyệt:

var newUrl = 'http://example.com'; 
var objectEl = document.getElementById('contentarea'); 
objectEl.outerHTML = objectEl.outerHTML.replace(/data="(.+?)"/, 'data="' + newUrl + '"');

Nguồn

2012-05-18 00:08:03

0

Antoher cách để làm việc đó, bạn có thể nhúng các đối tượng trong một DIV

var newUrl = 'http://example.com'; 
var divEl = document.getElementById('divID'); 
var objEl = document.getElementById('objID'); 
objEl.data = newUrl; 
// Refresh the content 
divEl.innerHTML = divEl.innerHTML;

Nguồn

2013-03-02 11:23:00 MikeT

1

Tôi tìm thấy một giải pháp rất đơn giản mà cũng làm việc trong Chrome. Bí quyết là để làm cho đối tượng (hoặc một phần tử cha) vô hình, thay đổi thuộc tính dữ liệu, và sau đó làm cho đối tượng có thể nhìn thấy một lần nữa.

Trong mã bên dưới, giả định rằng object_element là phần tử đối tượng và parent_element là phần tử cha và url là url của dữ liệu.

parent_element.style.display = 'none'; // workaround for Chrome 
object_element.setAttribute('data', url); 
parent_element.style.display = '';

Nguồn

2013-09-21 14:47:21 user2802253

1

Sau user2802253, tôi sử dụng trình duyệt này trên Safari và Firefox, cũng buộc phải vẽ lại. (xin lỗi, không đủ danh tiếng để đăng bài như một bình luận đơn giản).

theObject.style.visibility = null; 
theObject.setAttribute("data", url); 
theObject.style.visibility = "visible";

Nguồn

2015-02-13 19:04:06 wessel

1

Tôi nghĩ đây là cách tốt hơn để đạt được mục tiêu của bạn.

Html:

<div id="mytemplate"><div>

Js:

function changeTemplate(t){ 
var mytemplate = document.getElementById("mytemplate"); 
mytemplate.innerHTML = '<object type="text/html" data=' + t + '></object>'; 
} 
changeTemplate('template.html'); 
changeTemplate('whatever.html');

Nguồn

2015-03-19 19:12:43

+0

Nó không hoạt động đủ! Xin lỗi, nhưng tôi đã đặt trừ câu trả lời đó. –

0 

var content_area = document.getElementById("contentarea"); 
 
    content_area.data = newUrl;

Refreshes đối tượng trong Chrome Version 42.0.2311.90 m

Nguồn

2015-04-21 12:56:37

1

Các giải pháp trên không hoạt động đúng trong Firefox, thẻ Object không làm mới vì một số lý do. Thẻ đối tượng của tôi hiển thị hình ảnh SVG.

giải pháp làm việc của tôi cho điều này là để thay thế nút Object hoàn chỉnh với một bản sao:

var object = document.getElementById(objectID); 
object.setAttribute('data', newData); 

var clone = object.cloneNode(true); 
var parent = object.parentNode; 

parent.removeChild(object); 
parent.appendChild(clone);

Nguồn

2015-04-28 09:17:45

1 
var obj = document.getElementById("pdfDoc"); 
obj.setAttribute('data', newPdf);

làm việc trên phiên bản Chrome 54 và Safari, nhưng đã không làm việc trên IE 11

những gì đã làm việc với họ tất cả

var obj = document.getElementById("pdfDoc"); 
obj.setAttribute('data', newPdf); 
var cl = obj.cloneNode(true); 
var parent = obj.parentNode; 
parent.removeChild(obj); 
parent.appendChild(cl);

Nguồn

2016-12-13 05:22:56 user7288989

Các vấn đề liên quan

 Các vấn đề liên quan