javascript - 计算父 Div 的定位

Question

您好，我想计算 Div 的位置。如果我无法正确解释，请原谅我，但我会尝试以最简单的方式解释所有内容。我正在创建侧面板广告并放置我想要宽度位置的面板。当我在我的服务器上上传脚本时，我会得到一个小脚本，我们将其放置在发布者网站上，我们的脚本在 iframe 中运行。我想获得具有“内容”类的 div 的位置。这是屏幕截图。

在上面的屏幕截图中，黄色突出显示的脚本正在计算红框中的 div class="content"的位置。我的代码运行良好，但在发布者网站上运行不正常，我只能获得两个 id 类似于 ebDiv 的 Div .....(这些 div 在黄色突出显示的 js 上方)。

然后我发现要读取 parentDiv 以获得内容位置。

我写了这段代码。

 var parentDoc = window;
        while (parentDoc !== parentDoc.parent) {
            parentDoc = parentDoc.parent;
        }
        parentDoc = parentDoc.document;
        var parentDiv = parentDoc.getElementsByTagName('div');
        var divs = [];
        for (var i = 0; i < parentDiv.length; i++) {
            if (parentDiv[i].className == "content") {
       alert(parentDiv[i].offsetWidth);
       alert(parentDiv[i].offsetLeft);
      }

宽度计算为 1010，这很好，但我只是缺少左定位，我使用 parentDiv[i].offsetLeft 是 2。

屏幕截图上方的宽度为 1010，这很好，但左侧定位不正确。

我有这段代码来计算宽度。

function ReadDivPos(selector) {
        var _divPos = "";

        $(selector).each(function() {
            var p = $(this).offset();
            var w = $(this).width();
            console.log("Top " + p.top) //top
            console.log("left " + p.left) //left
            console.log("right " + p.left + w) //right
            console.log("offsetWidth " + w); //width

            _divPos += "Left " + p.left + ",Width " + w + ",Avail Width " + window.screen.availWidth + ",Right " + (p.left + w) + "\\n";
        });
        return _divPos;
    }
console.log(ReadDivPos(".content"));

当我使用相同的代码来计算定位时，它不起作用。

                 var parentDoc = window;
                 while (parentDoc !== parentDoc.parent) {
                    parentDoc = parentDoc.parent;
                }
                parentDoc = parentDoc.document;
                var parentDiv = parentDoc.getElementsByTagName('div');
                var divs = [];
                for (var i = 0; i < parentDiv.length; i++) {
                    if (parentDiv[i].className == "content") {
                   $(parentDiv[i]).each(function() {
                    var p = $(this).offset();
                    var w = $(this).width();
                    console.log("Top " + p.top) //top
                    console.log("left " + p.left) //left
                    console.log("right " + p.left + w) //right
                    console.log("offsetWidth " + w); //width

                    _divPos += "Left " + p.left + ",Width " + w + ",Avail Width " +          window.screen.availWidth + ",Right " + (p.left + w) + "\\n";

    }

  }

谁能告诉我如何解决这个问题。 Jquery/Javascript 任何东西都可以。我不擅长前端的事情，所以如果我不能更好地解释它，我很抱歉。提前致谢

Answer 1

这是一个用于获取元素在页面上的位置的函数:

    function getPosition(element) {
        var xPosition = 0;
        var yPosition = 0;

        while (element) {
            xPosition += (element.offsetLeft - element.scrollLeft + element.clientLeft);
            yPosition += (element.offsetTop - element.scrollTop + element.clientTop);
            element = element.offsetParent;
        }
        return { x: xPosition, y: yPosition };
    }

这样使用:

var pos = getPosition(element);
var x = pos["x"];
var y = pos["y"];

我不确定这是否正是您所需要的，但如果不是，您可以调整它以适应您的情况