Question

我正在尝试构建一个应用程序，该应用程序将采用CSV网址，并显示网页的屏幕截图。但是，我遇到了这样的问题：屏幕截图会返回带有阻止站点内容的完整页面模式/弹出窗口。我正在使用的API（url2png.com）允许CSS注入或用户代理参数。我尝试使用注入这样的CSS文件，但是它无法正常运行。

type KeysList<T> = (keyof T)[]
type Omit<T, K extends KeysList<T>> = Exclude<keyof T, K[number]>

function getAllKeys<T>(obj: T): KeysList<T> {
    return Object.keys(obj) as KeysList<T>
}

function exclude<T, K extends KeysList<T>>(obj: T, excludes: K) {
    const filterCallback = (key: keyof T): key is Omit<T, K> => // <-- THIS LINE
        !excludes.includes(key) 

    return getAllKeys(obj)
        .filter(filterCallback)
}

const a = {
    foo: 'abc',
    bar: 'abc',
    baz: 'abc',
    yay: true
};

const b = exclude(a, ['foo', 'bar'])
    .map(key => {                   // (EXPECTED :: key: 'baz') (ACTUAL :: key: 'foo' | 'bar' | 'baz')
        if (key === 'bar') { }      // Error
        if (key === 'foo') { }      // Error
        if (key === 'baz') { }      // Okay
        if (key === 'yay') { }      // Okay
    });

有人知道删除模态/防止加载的有效方法吗？

Answer 1

在我们的对话中发现，似乎url2png会将CSS附加在网站的CSS之前（因此具有较低的优先级），或者规则集的specificity的优先级不如网站的CSS。尽管使用!important通常是一个坏习惯，但是在网络抓取中，尤其是在您打算强制执行这些规则的情况下，这将是最好的方法。

因此，只需将声明更改为包含!important，就可以了：

.ju_overlay {
    display: none !important;
}

#modalcontent {
    display: none !important;
}

.shopify-section-popup-subscription {
    display: none !important;
}

.modal-backdrop {
    display: none !important;
}

注入CSS以从屏幕截图API（url2png.com）删除模式/弹出窗口

1 个答案: