Js计算iframe里面元素在手机屏幕上面的坐标及范围

博主： huoyu
发布时间：2024 年 12 月 10 日
41 次浏览
暂无评论
6428字数
分类：技术教程

```javascript
function getRandomInt(min, max) {
    min = Math.ceil(min);
    // 向上取整，确保是整数
    max = Math.floor(max);
    // 向下取整，确保是整数
    console.log(min, max)
    return Math.floor(min, max);
    // 生成随机数
}

function getRandomPointInRectangle(topLeftX, topLeftY, bottomRightX, bottomRightY, marginRatio) {
    // 计算矩形宽度和高度
    const width = bottomRightX - topLeftX;
    const height = bottomRightY - topLeftY;

// 动态计算边距，边距为宽度和高度的 marginRatio（比例）
    const marginX = width * marginRatio;
    const marginY = height * marginRatio;

// 如果矩形太小，确保边距不会超出矩形的尺寸
    const effectiveMarginX = Math.min(marginX, width / 2);
    const effectiveMarginY = Math.min(marginY, height / 2);

// 检查有效的随机点生成范围
    if (effectiveMarginX * 2 > width || effectiveMarginY * 2 > height) {
        throw new Error("Margin is too large for the given rectangle dimensions.");
    }

// 限制随机点的范围在矩形内，距离边界至少为动态 margin
    const randomX = Math.random() * (width - 2 * effectiveMarginX) + topLeftX + effectiveMarginX;
    const randomY = Math.random() * (height - 2 * effectiveMarginY) + topLeftY + effectiveMarginY;
    console.log({
        "x": Math.floor(randomX),
        "y": Math.floor(randomY)
    })
    return {
        "x": Math.floor(randomX),
        "y": Math.floor(randomY)
    };
}

function huoyu(iframe_el, a_el) {
    // 获取匹配的 iframe 列表
    let iframes = document.getElementsByName(iframe_el);
    console.log("iframesByName", iframes)
    var iframe = iframes[0];

if (iframes.length < 1) {
        iframes = document.getElementById(iframe_el);
        console.log("iframesById", iframes)
        iframe = iframes
    }

// console.log("iframe:::", iframe)
    const windowHeight = window.innerHeight || document.documentElement.clientHeight;
    const windowWidth = window.innerWidth || document.documentElement.clientWidth;
    console.log("网页宽高：", windowWidth, windowHeight)
    let pixelRatio = window.devicePixelRatio;
    console.log("设备像素比例 (DPR):", pixelRatio);

// 检查是否找到目标 iframe
    if (iframe) {
        // 取第一个匹配的 iframe
        const element_rec = iframe.getBoundingClientRect();
        // console.log(element_rec);
        // 元素左上角的 X 坐标
        const left = element_rec["left"]
        // 元素左上角的 Y 坐标
        const top = element_rec["top"]
        //元素的宽
        const element_width = element_rec['width']
        // 元素的高
        const element_height = element_rec['height']

console.log("iframe的左上角坐标：", left, top)
        // const element_zhon_x = left + element_width / 2
        // const element_zhon_y = top + element_height / 2
        // console.log("元素的网页中心点坐标:", element_zhon_x, element_zhon_y)
        const element_zhon_x = left
        const element_zhon_y = top
        console.log("元素的网页左上角坐标:", element_zhon_x, element_zhon_y)

console.log("iframe的宽高：", element_width, element_height)
        // # 获取网页视口的宽度和高度，考虑设备像素密度

const inner_width = window.innerWidth * window.devicePixelRatio;
        const outer_height = window.outerHeight * window.devicePixelRatio;
        console.log("获取网页视口的宽度和高度", inner_width, outer_height)
        // # 获取设备的屏幕宽度和高度
        const screen_width = window.screen.width * window.devicePixelRatio;
        const screen_height = window.screen.height * window.devicePixelRatio;
        console.log("获取设备的屏幕宽度和高度", screen_width, screen_height)
        var element_ping_zhon_x = element_zhon_x * pixelRatio
        var element_ping_zhon_y = element_zhon_y * pixelRatio + (screen_height - outer_height)
        console.log("在手机屏幕坐标: X:" + element_ping_zhon_x + ", Y:" + element_ping_zhon_y)
        // 上面部分获取到了iframe的中心点/左上角的位置
        // 下面获取iframe里面元素所在位置
        if (iframe) {
            // 确保 iframe 内容已加载
            const iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
            console.log("iframeDoc:", iframeDoc)
            // 检查 iframe 内部文档是否存在
            if (iframeDoc) {
                // 定位 id 为 google_image_div 的元素
                let targetElement = iframeDoc.getElementById(a_el);
                if (!targetElement) {
                    // 如果通过 ID 没有找到，则通过类名查找
                    const elements = iframeDoc.getElementsByClassName(a_el);
                    if (elements.length > 0) {
                        targetElement = elements[0];
                        // 获取第一个匹配的元素
                    }
                }

if (targetElement) {
                    const targetElement_hh = targetElement.getBoundingClientRect()
                    console.log("找到目标元素:", targetElement_hh);
                    // 元素左上角的 X 坐标
                    let x = targetElement_hh["x"]
                    // 元素左上角的 Y 坐标
                    let y = targetElement_hh["y"]
                    //元素的宽
                    //元素的宽
                    let element_width = targetElement_hh['width']
                    // 元素的高
                    let element_height = targetElement_hh['height']
                    console.log("iframe内的元素坐标", x, y, element_width, element_height)

const zuihou_x = element_ping_zhon_x + x * pixelRatio
                    const zuihou_y = element_ping_zhon_y + y * pixelRatio

const zuihou_x1 = element_ping_zhon_x + (x + element_width) * pixelRatio
                    const zuihou_y1 = element_ping_zhon_y + (y + element_height) * pixelRatio
                    console.log("最后的坐标位置", zuihou_x, zuihou_y, zuihou_x1, zuihou_y1)
                    // 取范围内的区间数值
                    const randomPoint = getRandomPointInRectangle(zuihou_x, zuihou_y, zuihou_x1, zuihou_y1, 0.2)

console.log("随机点的坐标:", randomPoint);
                    return randomPoint

} else {
                    console.error("无法在 iframe 内找到 id=ns-t6wts-e-6 的元素");
                    return {"x":0,"y":0}
                }
            } else {
                console.error("无法访问 iframe 的文档内容");
                return {"x":0,"y":0}
            }

} else {
            console.error("未找到目标 iframe");
            return {"x":0,"y":0}
        }

} else {
        console.error("Iframe not found");
        return {"x":0,"y":0}
    }
}

result=huoyu("google_ads_iframe_//playai.online/playai.online_Mobile_0", "aw0")
console.log(result)
```

最后修改：2024 年 12 月 10 日

如果觉得我的文章对你有用，请随意赞赏

发表评论取消回复
使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款

评论 *

私密评论

名称 *

🎲

邮箱

地址

huoyu1
真的很需要
欣
很牛逼|´・ω・)ノ
hhh
真棒
Hongjia
https://blog.dingtone.me/zh/rec...
Hongjia
https://5sim.net/zh使用该网站可以最低1 卢布充值

Js计算iframe里面元素在手机屏幕上面的坐标及范围

huoyu • 2024 年 12 月 10 日