我的代码使用 console.log 离线运行，但不在浏览器中

Posted 2023-03-08

【中文标题】我的代码使用 console.log 离线运行，但不在浏览器中

【英文标题】：My code runs offline with console.log but not in browser

【发布时间】：2019-10-05 01:16:06

【问题描述】：

所以我正在做我的第一个项目，我只是在进行过程中弄清楚事情。 我正在使用一个名为 mal-scraper 的 npm 模块，该模块从 MyAnimeList 网站收集数据（例如：标题、动漫和图片的链接），并希望创建一个使用该模块显示当前正在播放的节目的网站。

我离线运行代码并将其保存到变量中。它在调用时打印出所需的结果，然后我想像这样制作卡片：

let count = Object.keys(obj).length;
        //iterate through the obj and create cards
        for (let i= 0;i < count;i++) 
            html += `<div class="column">
            <div class="card">
                <div class="container">
                        <a id="link" href= "$obj[i]['link']"><img id="img" src="$obj[i]['picture']"></a>
                        <h1 id="title" >$obj[i]['title']</h1>
                        <p id="date">$obj[i]['releaseDate']</p>
                </div>
            </div>
        </div>`
        
        console.log(html); //test
        return html;

这也很好，但是当我尝试使用 jquery 将它添加到 index.html 时

$("#row").add(html) 

它不起作用，我收到了一个我不理解的 Cross-Origin 错误和各种 CORB 警告。我设法用 chrome 扩展修复了第一个，但不知道如何修复后者。

【问题讨论】：

你如何/在哪里运行这个脚本，相对于你的目标页面？

也许你想要.append()而不是.add()？

@mark.hch 谢谢！当我创建其他测试卡时，.append() 似乎可以工作，而 .add() 没有。

NP！当您将$() 与选择器一起使用时，它会创建一个与选择器匹配的元素集合——使用.add() 将向该集合添加更多项目；例如$('div').css('color', 'blue').add('p').css('background-color', 'green') 将选择所有div 元素，将其文本颜色更改为蓝色，然后将所有p 元素添加到集合中，并将所有div 和p 元素的背景颜色更改为绿色。 .append() 只是将 HTML “添加”到所选元素的末尾——这可能是两者混淆的原因。您也可以使用.html() 来设置 HTML，而不是附加到它。

@mark.hch 我确实还有一个问题要问。所以在我的app.js（与browserify 捆绑）中，我写了module.exports = dataOut，我想使用这个长html 字符串并将其插入index.html 文件中。我怎么能这样做呢？ （<script src="bundle.js"></script> 已经存在于 html 中，我对$(document).ready(function()) 有所了解，只是不知道它是否应该进入index.html 或app.js 文件）

【参考方案1】：

当然这有点老了，但由于它首先出现在 G 搜索中“...javascript not working offline”这里是一个明显但容易错过的细节。

使用<script>...</script> 仅裸露打开关闭标签不会获得结果。离线浏览器不像某些引擎那样智能，它们可能在在线服务器的后台运行依赖处理程序。

只需添加<script type="text/javascript">...</script> 即可获得浏览器的原生支持。

坚持使用 type=javascript 以获得更好的离线兼容性，即使大多数引擎谈话引用使用文本/应用程序类型。

在 android Lollipop 上使用 Chrome、FF Beta 测试；作为本地文件。

【参考方案2】：

您好，欢迎来到 *** :)

您可能需要从自定义后端获取信息并设置相应的标头。

如果您不知道如何编写自定义后端或只是尝试使用它，您可以使用https://cors-anywhere.herokuapp.com/。它对原始请求进行隧道处理并添加标头以允许跨源请求。

CORS 背后的基本思想是防止其他网站在未经您许可的情况下向您的服务器请求资源。

更多信息请点击此处：https://developer.mozilla.org/de/docs/Web/HTTP/CORS。

【讨论】：

非常感谢，现在我在浏览器中收到了console.log(html); //test。我只需要深入了解 jquery 即可正确显示它们。

很高兴听到这个消息 :) - 但是你应该在没有 jquery 的情况下尝试它，因为 jquery JavaScript 本身已经发展并为“jquery stuff”提供了一些方便的功能