Javascript 使用木偶师操纵/设置阴影根样式

我试着在没有声音和分享按钮的情况下拍摄AMP故事的截图

在我发现有一种叫做shadowdom的东西后，我想知道如何设置display:none-there:

addStyleTag({content: '.i-amphtml-story-system-layer-buttons { display : none!important }'})

我想我是这样进入阴影DOM的

const shadowRootInnerHTML = await page.evaluate(() => {
    return document.querySelector("body > amp-story > div").shadowRoot.innerHTML
});

这就是我目前正在使用的

const browser = await puppeteer.launch({
  slowMo: 250,
  args: [
    '--disable-infobars',
  ]
});
const page = await browser.newPage()

await page.emulate({
  name: 'iPhone1080x1920',
  userAgent: 'Mozilla/5.0 (iPhone; CPU iPhone OS 11_0 like Mac OS X) AppleWebKit/604.1.38 (KHTML, like Gecko) Version/11.0 Mobile/15A372 Safari/604.1',
  viewport: {
    width: 360,
    height: 640,
    deviceScaleFactor: 3,
    isLandscape: false
  }
});

await page.goto(urlToTest, {
  waitUntil: 'networkidle2',
  timeout: 0
});

const textContent = await page.evaluate(() => {
  return document.querySelector("body > amp-story > div").shadowRoot.innerHTML
});

---

Amp页面在Amp故事中有多个div元素

我们可以执行这个普通JavaScript，它将隐藏amp页面上的顶部幻灯片和共享按钮

我在代码中添加了两种方法，您可以应用其中任何一种

// there are multiple div elements inside amp-story
const elements = [...document.querySelectorAll("body > amp-story > div")];

elements.map(rootElement => {
  // find the shadowRoot inside if it exists
  const shadowRoot = rootElement.shadowRoot;

  if (shadowRoot) {
    /**
     * WAY 1: Find the element and apply css to it directly
     */
    // this holds the top share button and pagination slides
    const element = shadowRoot.querySelector(
      ".i-amphtml-story-system-layer"
    );

    // forcefully hide the element
    if (element) element.style.setProperty("display", "none", "important");

    /**
     * WAY 2: Append your own style to the <style> tag inside the amp shadowRoot
     */
    shadowRoot.querySelector('style').innerHTML += `.i-amphtml-story-system-layer { display : none!important }`
  }
});

//amp story中有多个div元素
const elements=[…document.queryselectoral（“body>amp story>div”）；
elements.map（rootElement=>{
//如果阴影根存在，请在其中查找阴影根
const shadowRoot=rootElement.shadowRoot；
if（阴影根）{
/**
*方法1：找到元素并直接应用css
*/
//这将保存顶部的共享按钮和分页幻灯片
常量元素=shadowRoot.querySelector(
“.i-tml-story-system-layer”
);
//强制隐藏元素
if（element）element.style.setProperty（“显示”、“无”、“重要”）；
/**
*方法2：将您自己的样式附加到amp shadowRoot内的标记
*/
shadowRoot.querySelector（'style'）.innerHTML+=`.i-amftml-story-system-layer{display:none！important}`
}
});

基本上

• 找到div
• 获得阴影根
• 找到元素并直接应用，或者向标记添加样式

示例amp页面上的结果：

---

Amp页面在Amp故事中有多个div元素

我们可以执行这个普通JavaScript，它将隐藏amp页面上的顶部幻灯片和共享按钮

我在代码中添加了两种方法，您可以应用其中任何一种

// there are multiple div elements inside amp-story
const elements = [...document.querySelectorAll("body > amp-story > div")];

elements.map(rootElement => {
  // find the shadowRoot inside if it exists
  const shadowRoot = rootElement.shadowRoot;

  if (shadowRoot) {
    /**
     * WAY 1: Find the element and apply css to it directly
     */
    // this holds the top share button and pagination slides
    const element = shadowRoot.querySelector(
      ".i-amphtml-story-system-layer"
    );

    // forcefully hide the element
    if (element) element.style.setProperty("display", "none", "important");

    /**
     * WAY 2: Append your own style to the <style> tag inside the amp shadowRoot
     */
    shadowRoot.querySelector('style').innerHTML += `.i-amphtml-story-system-layer { display : none!important }`
  }
});

//amp story中有多个div元素
const elements=[…document.queryselectoral（“body>amp story>div”）；
elements.map（rootElement=>{
//如果阴影根存在，请在其中查找阴影根
const shadowRoot=rootElement.shadowRoot；
if（阴影根）{
/**
*方法1：找到元素并直接应用css
*/
//这将保存顶部的共享按钮和分页幻灯片
常量元素=shadowRoot.querySelector(
“.i-tml-story-system-layer”
);
//强制隐藏元素
if（element）element.style.setProperty（“显示”、“无”、“重要”）；
/**
*方法2：将您自己的样式附加到amp shadowRoot内的标记
*/
shadowRoot.querySelector（'style'）.innerHTML+=`.i-amftml-story-system-layer{display:none！important}`
}
});

基本上

• 找到div
• 获得阴影根
• 找到元素并直接应用，或者向标记添加样式

示例amp页面上的结果：