javascript 前后的 UrlFetchApp答案

【问题标题】：UrlFetchApp before and after javascriptjavascript 前后的 UrlFetchApp
【发布时间】：2019-12-02 14:30:03
【问题描述】：

我有一个应用程序脚本，它抓取一个 URL 并返回它的内容。然后，我想在页面上运行 javascript 之前搜索页面中的特定字符串。然后，我想在 javascript 完成之后评估同一个页面。

原因是我有一个第 3 方脚本，可以根据地区替换页面上的电话号码。我想在 javascript 源代码之前评估原始数据，以查看是否存在可替换数字之一。如果是这样，我想检查 after-javascript 版本以验证它是否已被该地区的数字替换。

我可以通过在浏览器中选择“查看源代码”手动执行此操作，然后检查找到该字符串的检查元素。

我的问题是我无法从 UrlFetchApp 获取原始来源。有没有办法做到这一点？

提前致谢，汉斯

代码

var doc = UrlFetchApp.fetch(url).getContentText();
// doc is the after-javascript version...

【问题讨论】：

UrlFetchApp.fetch() 返回从 HTTP 请求中检索到的内容。不会执行从调用中检索到的 Javascript 代码。您可以使用本地应用程序发出请求（例如 curl、postman 或 insomnia http）来验证此行为——所有应用程序都应返回相同的响应（无需执行 JS）。您能否提供您尝试获取的 URL，以及您尝试从中提取的数据？非常感谢。
我明白发生了什么。我正在搜索body.innerText。然而，CSS 用我正在搜索的电话号码隐藏了
（可见性：不可见），并且显然 innerText 不会返回这样的 div。我虽然电话号码已经换成了地区电话号码。谢谢！
嘿 @Hans 据我所知，即使 div 设置为不可见，您仍然应该能够从中获取数据。您介意创建一个答案来解释您的发现吗？谢谢！

标签： google-apps-script urlfetch

【解决方案1】：

我刚刚在一个示例网站上进行了测试，发现 UrlFetchApp 在 JS 渲染之前确实返回了原始源。我相信.fetch() 像标准的 HTTP GET 请求一样工作，所以我不明白为什么不是这样。

示例： https://tutorialzine.com/2015/02/single-page-app-without-a-framework

UrlFetchApp 结果片段：

<ul class="products-list">
    <script id="products-template" type="x-handlebars-template">
        {{#each this}}
            <li data-index="{{id}}">
                <a href="#" class="product-photo"><img src="{{image.small}}" height="130" alt="{{name}}"/></a>
                <h2><a href="#"> {{name}} </a></h2>
                <ul class="product-description">
                    <li><span>Manufacturer: </span>{{specs.manufacturer}}</li>
                    <li><span>Storage: </span>{{specs.storage}} GB</li>
                    <li><span>OS: </span>{{specs.os}}</li>
                    <li><span>Camera: </span>{{specs.camera}} Mpx</li>
                </ul>
                <button>Buy Now!</button>
                <p class="product-price">{{price}}$</p>
                <div class="highlight"></div>
            </li>
        {{/each}}
    </script>
</ul>

后JS渲染结果：

<ul class="products-list">
    <script id="products-template" type="x-handlebars-template">
        
                {{#each this}}
                    <li data-index="{{id}}">
                        <a href="#" class="product-photo"><img src="{{image.small}}" height="130" alt="{{name}}"/></a>
                        <h2><a href="#"> {{name}} </a></h2>
                        <ul class="product-description">
                            <li><span>Manufacturer: </span>{{specs.manufacturer}}</li>
                            <li><span>Storage: </span>{{specs.storage}} GB</li>
                            <li><span>OS: </span>{{specs.os}}</li>
                            <li><span>Camera: </span>{{specs.camera}} Mpx</li>
                        </ul>
                        <button>Buy Now!</button>
                        <p class="product-price">{{price}}$</p>
                        <div class="highlight"></div>
                    </li>
                {{/each}}
    </script>
    
    <li data-index="1" class="">
        <a href="#" class="product-photo"
            ><img
                src="assets/images/sony-xperia-z3.jpg"
                height="130"
                alt="Sony Xperia Z3"
        /></a>
        <h2><a href="#"> Sony Xperia Z3 </a></h2>
        <ul class="product-description">
            <li><span>Manufacturer: </span>Sony</li>
            <li><span>Storage: </span>16 GB</li>
            <li><span>OS: </span>Android</li>
            <li><span>Camera: </span>15 Mpx</li>
        </ul>
        <button>Buy Now!</button>
        <p class="product-price">899$</p>
        <div class="highlight"></div>
    </li>
    <li data-index="2" class="">
        <a href="#" class="product-photo"
            ><img src="assets/images/iphone6.jpg" height="130" alt="Iphone 6"
        /></a>
        <h2><a href="#"> Iphone 6 </a></h2>
        <ul class="product-description">
            <li><span>Manufacturer: </span>Apple</li>
            <li><span>Storage: </span>16 GB</li>
            <li><span>OS: </span>iOS</li>
            <li><span>Camera: </span>8 Mpx</li>
        </ul>
        <button>Buy Now!</button>
        <p class="product-price">899$</p>
        <div class="highlight"></div>
    </li>
    <li data-index="3" class="">
        <a href="#" class="product-photo"
            ><img src="assets/images/htc-one.jpg" height="130" alt="HTC One M8"
        /></a>
        <h2><a href="#"> HTC One M8 </a></h2>
        <ul class="product-description">
            <li><span>Manufacturer: </span>HTC</li>
            <li><span>Storage: </span>32 GB</li>
            <li><span>OS: </span>Android</li>
            <li><span>Camera: </span>5 Mpx</li>
        </ul>
        <button>Buy Now!</button>
        <p class="product-price">899$</p>
        <div class="highlight"></div>
    </li>
    <li data-index="4" class="">
        <a href="#" class="product-photo"
            ><img
                src="assets/images/galaxy-alpha.jpg"
                height="130"
                alt="Galaxy Alpha"
        /></a>
        <h2><a href="#"> Galaxy Alpha </a></h2>
        <ul class="product-description">
            <li><span>Manufacturer: </span>Samsung</li>
            <li><span>Storage: </span>32 GB</li>
            <li><span>OS: </span>Android</li>
            <li><span>Camera: </span>12 Mpx</li>
        </ul>
        <button>Buy Now!</button>
        <p class="product-price">899$</p>
        <div class="highlight"></div>
    </li>
    <li data-index="5" class="">
        <a href="#" class="product-photo"
            ><img
                src="assets/images/nokia-lumia.jpg"
                height="130"
                alt="Nokia Lumia"
        /></a>
        <h2><a href="#"> Nokia Lumia </a></h2>
        <ul class="product-description">
            <li><span>Manufacturer: </span>Nokia</li>
            <li><span>Storage: </span>16 GB</li>
            <li><span>OS: </span>Windows</li>
            <li><span>Camera: </span>5 Mpx</li>
        </ul>
        <button>Buy Now!</button>
        <p class="product-price">450$</p>
        <div class="highlight"></div>
    </li>
    <li data-index="6" class="">
        <a href="#" class="product-photo"
            ><img src="assets/images/zte-nubia.jpg" height="130" alt="Zte Nubia"
        /></a>
        <h2><a href="#"> Zte Nubia </a></h2>
        <ul class="product-description">
            <li><span>Manufacturer: </span>ZTE</li>
            <li><span>Storage: </span>32 GB</li>
            <li><span>OS: </span>Android</li>
            <li><span>Camera: </span>12 Mpx</li>
        </ul>
        <button>Buy Now!</button>
        <p class="product-price">399$</p>
        <div class="highlight"></div>
    </li>
    <li data-index="7" class="">
        <a href="#" class="product-photo"
            ><img
                src="assets/images/galaxy-s5.jpg"
                height="130"
                alt="Samsung Galaxy S5"
        /></a>
        <h2><a href="#"> Samsung Galaxy S5 </a></h2>
        <ul class="product-description">
            <li><span>Manufacturer: </span>Samsung</li>
            <li><span>Storage: </span>16 GB</li>
            <li><span>OS: </span>Android</li>
            <li><span>Camera: </span>15 Mpx</li>
        </ul>
        <button>Buy Now!</button>
        <p class="product-price">399$</p>
        <div class="highlight"></div>
    </li>
    <li data-index="8" class="">
        <a href="#" class="product-photo"
            ><img src="assets/images/iphone5s.jpg" height="130" alt="Iphone 5S"
        /></a>
        <h2><a href="#"> Iphone 5S </a></h2>
        <ul class="product-description">
            <li><span>Manufacturer: </span>Apple</li>
            <li><span>Storage: </span>16 GB</li>
            <li><span>OS: </span>iOS</li>
            <li><span>Camera: </span>8 Mpx</li>
        </ul>
        <button>Buy Now!</button>
        <p class="product-price">399$</p>
        <div class="highlight"></div>
    </li>
</ul>

【讨论】：

是的，你是对的。见上面的评论。 body.innerText 没有返回我正在寻找的文本，因为 div 被隐藏了。