问题
The target page has a simple HTML setup:
<html>
<body>
<frameset id="mainset" rows="50%,50%">
...
</frameset>
</body>
</html>
and I'd like to add frames using JavaScript.
This doesn't work:
var parent = document.getElementsByTagName("frameset")[0];
var child = document.createElement("frame");
child.src = "about:blank";
child.style = "background-color: red;";
parent.appendChild(child);
This does work, but it creates an iframe:
var parent = document.getElementsByTagName("body")[0];
var child = document.createElement("iframe");
child.src = "about:blank";
child.style = "background-color: red;";
parent.appendChild(child);
Is there a way to add frames to the frameset using javascript?
Sorry if this question has been asked before. I searched and found a lot of 'solutions' for people having similar problems, but those don't seem to apply here.
The target page looks like this:
回答1:
It's not enough to add a new <frame>
. You must also adjust the rows
or cols
attribute of the containing <frameset>
.
Also, if the frameset has an id
, use it instead of trying to get the node by tagname. (Ids are fast and unique.)
Code like this will work (for now):
You can see the code in action at this jsBin.
var parent = document.getElementById ("mainset");
var child = document.createElement ("frame");
child.style = "background-color: pink;";
parent.appendChild (child);
parent.rows = "30%,30%,30%"
var docRdyInt = null;
var frmCW = child.contentWindow;
if (frmCW) {
//-- Must wait for the new frame to be writable, esp in Firefox.
docRdyInt = setInterval (createFramedPage, 50);
}
else {
alert ("Oopsie! may be a rendering delay in some cases. Try code from console.");
}
function createFramedPage () {
if (frmCW.document.readyState == "complete") {
clearInterval (docRdyInt);
frmCW.document.body.innerHTML = '<p>Hello World!</p>';
}
}
来源:https://stackoverflow.com/questions/25581154/how-to-add-frames-to-an-existing-frameset-using-userscript