1<script> 2function test1() { 3 document.getElementById("test").src = "resources/mutate-frame.html"; 4} 5 6function test2() { 7 document.getElementById("test").src = "resources/mutate-frame-2.html"; 8} 9 10var count = 1; 11function run() { 12 var container = document.getElementById("test2"); 13 var div = document.createElement("div"); 14 div.textContent = "Testing " + (count++); 15 container.appendChild(div); 16 if (count > 10) 17 container.removeChild(container.firstChild); 18} 19 20setInterval(run, 1000); 21</script> 22<p>To begin test, open DevTools, Elements Panel and watch the DOM change to match the page. 23Clicking the buttons will navigate the subframe, and the all the subframe child nodes should change. 24Expand DOM nodes in the Elements Panel to see new nodes appearing in the list live.</p> 25<div style="clear: both"> 26<button onclick="test1()">Test Frame 1</button> 27<button onclick="test2()">Test Frame 2</button> 28</div> 29<div style="float: left"> 30<iframe id="test" src="resources/mutate-frame.html" width="200" height="300"></iframe> 31</div> 32<div style="float: left; margin-left: 10px;" id="test2"></div> 33