HTML object (object tag) does not load properly when it is dynamically updated after an AJAX request
Categories
(Core :: DOM: Core & HTML, defect)
Tracking
()
People
(Reporter: luke77225, Unassigned)
Details
Attachments
(5 files)
bug.png
Steps to reproduce:
When you dynamically change the "data" attribute of a HTML object tag in the response handler of an AJAX request, the object tag sometimes fails to dynamically update it's contents to the contents of the specified data value, instead just displaying a blank frame.
This does not seem to occur with iframes, only html objects (<object>).
Synchronously waiting before sending the AJAX request (or after sending it, in the response handler; just before dynamically updating the object) noticeably reduces how often the bug occurs. Having the developer console open also has this same reductive effect (presumably because much like a synchronous wait, it also delays the rendering of the HTML object). when async is set to false for the AJAX request, the bug does not appear to occur.
This bug should be easily reproducible using the provided code below. This bug does not seem to occur in the latest versions of Google Chrome or Safari.
When running the provided code, pressing the button will send an AJAX request to a PHP file and when the JavaScript receives a response it will dynamically update the object tag "data" value, which should re-render the object. You can see from the attached image what the object is supposed to render as (top of image), and then what it renders as after the button has been pressed and after the bug has occurred (bottom of image). All the code files should be in the same directory when they are run, and you will need to be running a local PHP enabled web server (e.g. with XAMPP), for the PHP AJAX request (alternatively you could AJAX to a PHP file hosted on some other server, although I haven't tested with this).
(Code)
(bug.html)
<!DOCTYPE html>
<button onclick="handleButtonPressed();">Button</button><br><br>
<object id="page" type="text/html" data="object.html" style="border-style: inset;"></object>
<script src="bug.js"></script>
(bug.js)
function wait(ms) {
var start = Date.now(),
now = start;
while (now - start < ms) {
now = Date.now();
}
}
function setObject(location) {
document.getElementById("page").setAttribute("data", location);
}
function handleButtonPressed() {
//wait(10); // Synchronously waiting before or after the AJAX request noticeably reduces how often the bug occurs.
//setObject("object.html"); // The bug does not occur if we set the object immediately
// without any AJAX request (comment out the AJAX request code below).
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = handleAJAXResponse
xhttp.open("GET", "bug.php", true); // The bug does not occur if we set async to false.
xhttp.send();
}
function handleAJAXResponse() {
if(this.readyState != 4 || this.status != 200) {
return;
}
// wait(10); // Synchronously waiting before or after the AJAX request noticeably reduces how often the bug occurs.
//console.log(this.response)
setObject("object.html");
}
(object.html)
<!DOCTYPE html>
<style>
body { background-color: pink; }
</style>
<h1>Test</h1>
(bug.php)
<?php
exit();
?>
|
||
Comment 5•1 year ago
|
||
The Bugbug bot thinks this bug should belong to the 'Core::DOM: Core & HTML' component, and is moving the bug to that component. Please correct in case you think the bot is wrong.
|
|
||
Comment 6•1 year ago
|
||
The severity field is not set for this bug.
:farre, could you have a look please?
For more information, please visit auto_nag documentation.
|
||
Updated•1 year ago
|
Description
•