place iframe at specific point in HTML page's body?
I've got the following..
var insertbeforenode = document.body;
var outerdiv = doc.createElement('div');
outerdiv.id = '_dialog_div';
o开发者_StackOverflow中文版uterdiv.style.display = "none";
var overlay = doc.createElement("link");
overlay.href = chrome.extension.getURL("overlay.css");
overlay.rel = "stylesheet";
overlay.type = "text/css";
outerdiv.appendChild(overlay);
var iFrame = doc.createElement('iframe');
iFrame.id = '_dialog_iframe';
iFrame.name = '_dialog_iframe';
outerdiv.appendChild(iFrame);
doc.body.appendChild(outerdiv);
However, as expected it appends the outerdiv to the bottom of the page which isn't what I want to do. I'd like to insert it before insertbeforenode. I've tried insertbeforenode.parentNode.insertBefore(outerdiv, insertbeforenode); but that doesn't appear to work in Chrome. Does anyone have any solutions?
EDIT: Just to clarify the effect I'm looking to create is..
<html>
<head></head>
<iframe here> </iframe here>
<body> </body>
</html>
When I do this in Firefox:
<html>
<head></head>
<iframe> </iframe>
<body> </body>
</html>
It looks the same as this:
<html>
<head></head>
<body>
<iframe></iframe>
</body>
</html>
But your comments and notes indicate that you're trying to place the iframe over the page without altering the appearance of the underlying content.
What you really want is this structure:
<html>
<head></head>
<body>
<!-- Normal content goes here -->
<iframe>
<!-- Added iframe goes at the bottom -->
</iframe>
</body>
</html>
Then you set position:absolute; on the iframe; give it the usual width and height; and then set top, left, and the margins to center it. You might need to play around with z-index values on the iframe too but that depends on the page's content.
Adding an absolutely positioned element at the bottom of <body> is the usual of way of achieving what you're trying to do and it will work pretty much the same in any browser that can handle an iframe.
Here's a simple example: http://jsfiddle.net/ambiguous/KrjBv/. You already know how to do the JavaScript and I'm just trying to illustrate the CSS positioning so I used jQuery to cut down on the noise.
加载中,请稍侯......
精彩评论