| <script> |
| function test1() { |
| document.getElementById("test").src = "resources/mutate-frame.html"; |
| } |
| |
| function test2() { |
| document.getElementById("test").src = "resources/mutate-frame-2.html"; |
| } |
| |
| var count = 1; |
| function run() { |
| var container = document.getElementById("test2"); |
| var div = document.createElement("div"); |
| div.textContent = "Testing " + (count++); |
| container.appendChild(div); |
| if (count > 10) |
| container.removeChild(container.firstChild); |
| } |
| |
| setInterval(run, 1000); |
| </script> |
| <p>To begin test, open DevTools, Elements Panel and watch the DOM change to match the page. |
| Clicking the buttons will navigate the subframe, and the all the subframe child nodes should change. |
| Expand DOM nodes in the Elements Panel to see new nodes appearing in the list live.</p> |
| <div style="clear: both"> |
| <button onclick="test1()">Test Frame 1</button> |
| <button onclick="test2()">Test Frame 2</button> |
| </div> |
| <div style="float: left"> |
| <iframe id="test" src="resources/mutate-frame.html" width="200" height="300"></iframe> |
| </div> |
| <div style="float: left; margin-left: 10px;" id="test2"></div> |