使用 executeScript() 将弹出窗口中的数据通信到弹出窗口注入的内容脚本 [英] Communicate data from popup to content script injected by popup with executeScript()

查看：18 发布时间：2021/12/24 11:42:00 javascript html google-chrome-extension firefox-addon-webextensions

本文介绍了使用 executeScript() 将弹出窗口中的数据通信到弹出窗口注入的内容脚本的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我的 Chrome 扩展弹出窗口中有一个文本区域和一个按钮.我希望用户在文本区域输入所需的文本.然后，一旦他们点击按钮，它就会注入一个内容脚本，将当前页面上具有 <textarea class="comments"> 的字段的文本更改为用户输入的文本在 Chrome 扩展弹出窗口的 </code> 中.<em class="showen"></em></p> <p class="en">I have a text area and a button in my Chrome extension popup. I want users to input desired text in the text area. Then, once they click the button, it will inject a content script to change the text of the fields on the current page that have <code><textarea class="comments"></code> to the text that user entered in the <code><textarea></code> in the Chrome extension popup. </p> <p class="cn">我的问题是，如何从 <em>popup.html</em> 中的 <code><textarea></code> 获取文本并从 <em>popup.js</em> 到内容脚本?<em class="showen"></em></p> <p class="en">My question is, how can I get the text from the <code><textarea></code> in my <em>popup.html</em> and pass it from the <em>popup.js</em> to the content script?</p> <p class="cn">这是我目前拥有的:</p> <p class="cn"><em>popup.html</em>:</p> <pre><code><code><!doctype html> <html> <head><title>activity</title></head> <body> <button id="clickactivity3">N/A</button> <textarea rows="4" cols="10" id="comments" placeholder="N/A Reason..."></textarea> <script src="popup.js"></script> </body> </html> </code></code></pre> <p class="cn"><em>popup.js</em>:</p> <pre><code><code>function injectTheScript3() { chrome.tabs.query({active: true, currentWindow: true}, function(tabs) { // query the active tab, which will be only one tab //and inject the script in it chrome.tabs.executeScript(tabs[0].id, {file: "content_script3.js"}); }); } document.getElementById('clickactivity3').addEventListener('click', injectTheScript3); </code></code></pre> <p class="cn"><em>content_script3</em>:</p> <pre><code><code>//returns a node list which is good var objSelectComments = document.querySelectorAll('.comments'); //desired user input how? function setCommentsValue(objSelectComments,){ //This will be for loop to iterate among all the text fields on the page, and apply // the text to each instance. for (var i=0; i<objSelectComments.length; i++) { objSelectComments[i]= //user's desired text } </code></code></pre> <p class="cn"></p> <h3 class="best_ans mt-1">推荐答案</h3> <p class="cn">一般有以下三种方法:</p> <ol class="cn"><li>使用 <a href="https://developer.chrome.com/extensions/storage#type-StorageArea" rel="noreferrer"><code>chrome.storage.local</code></a> (<a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/API/storage/StorageArea" rel="noreferrer">MDN</a>) 来传递数据(先设置注入你的脚本).</li><li>在您的脚本之前注入代码，用数据设置变量(有关可能的安全问题，请参阅详细讨论).</li><li>使用<a href="https://developer.chrome.com/extensions/messaging" rel="noreferrer">消息传递</a> (<a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Content_scripts#Communicating_with_background_scripts" rel="noreferrer">MDN</a>) 以在<em></em>注入您的脚本之后传递数据.</li><em class="showen"></em></ol> <ol class="en"> <li>Use <code>chrome.storage.local</code> (MDN) to pass the data (set prior to injecting your script).</li> <li>Inject code prior to your script which sets a variable with the data (see detailed discussion for possible security issue).</li> <li>Use message passing (MDN) to pass the data <em>after</em> your script is injected.</li> </ol> <p class="cn"><h2>使用 <code>chrome.storage.local</code>(在执行脚本之前设置)</h2><p>使用此方法可维护您正在使用的执行范例，即注入执行功能然后退出的脚本.它也不存在使用动态值构建执行代码的潜在安全问题，这在下面的第二个选项中完成.<em class="showen"></em></p> <p class="en"> <h2>Use <code>chrome.storage.local</code> (set prior to executing your script)</h2> <p>Using this method maintains the execution paradigm you are using of injecting a script that performs a function and then exits. It also does not have the potential security issue of using a dynamic value to build executing code, which is done in the second option below.</p> <p class="cn"><strong>来自您的弹出脚本:</strong></p> <ol class="cn"><li>使用 <a href="https://developer.chrome.com/extensions/storage#type-StorageArea#method-StorageArea-set" rel="noreferrer"><code>chrome.storage.local 存储数据.set()</code></a> (<a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/Storage/StorageArea/set"rel="noreferrer">MDN</a>)</li><li>在 <code>chrome.storage.local.set()</code> 的回调中，调用 <a href="https://developer.chrome.com/extensions/tabs#method-executeScript" rel="noreferrer"><code>tabs.executeScript()</code></a> (<a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/API/tabs/executeScript" rel="noreferrer">MDN</a>)</li><em class="showen"></em></ol> <ol class="en"> <li>Store the data using <code>chrome.storage.local.set()</code> (MDN)</li> <li>In the callback for <code>chrome.storage.local.set()</code>, call <code>tabs.executeScript()</code> (MDN)</li> </ol> <p class="cn"></p> <pre><code><code>var updateTextTo = document.getElementById('comments').value; chrome.storage.local.set({ updateTextTo: updateTextTo }, function () { chrome.tabs.executeScript({ file: "content_script3.js" }); }); </code></code></pre> <p class="cn"><strong>来自您的内容脚本:</strong></p> <ol class="cn"><li>从 <a href="https://developer.chrome.com/extensions/storage#type-StorageArea#method-StorageArea-get" rel="noreferrer"><code>chrome.storage.local 读取数据.get()</code></a> (<a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/Storage/StorageArea/get"rel="noreferrer">MDN</a>)</li><li>对 DOM 进行更改</li><li>使 <code>storage.local</code> 中的数据无效(例如删除密钥:<a href="https://developer.chrome.com/extensions/storage#method-StorageArea-remove" rel="noreferrer"><code>chrome.storage.local.remove()</code></a> (<a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/Storage/StorageArea/remove" rel="noreferrer">MDN</a>)).</li><em class="showen"></em></ol> <ol class="en"> <li>Read the data from <code>chrome.storage.local.get()</code> (MDN)</li> <li>Make the changes to the DOM </li> <li>Invalidate the data in <code>storage.local</code> (e.g. remove the key: <code>chrome.storage.local.remove()</code> (MDN)).</li> </ol> <p class="cn"></p> <pre><code><code>chrome.storage.local.get('updateTextTo', function (items) { assignTextToTextareas(items.updateTextTo); chrome.storage.local.remove('updateTextTo'); }); function assignTextToTextareas(newText){ if (typeof newText === 'string') { Array.from(document.querySelectorAll('textarea.comments')).forEach(el => { el.value = newText; }); } } </code></code></pre> <p class="cn">参见:注释 1 &2.<em class="showen"></em></p> <p class="en">See: Notes 1 & 2.</p> <p class="cn">在执行脚本之前，您可以注入一些代码，在内容脚本上下文中设置一个变量，然后您的主脚本可以使用该变量:<em class="showen"></em></p> <p class="en">Prior to executing your script, you can inject some code that sets a variable in the content script context which your primary script can then use:</p> <p class="cn"><strong>安全问题:</strong><br>以下使用 <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify" rel="noreferrer"><code>"'" + JSON.stringify().replace(/\/g,'\\').replace(/'/g,"\'") + "'"</code></a> 对数据进行编码在将其放入 <code>code</code> 字符串之前，将其转换为在解释为代码时将是正确 JSON 的文本.<code>.replace()</code> 方法需要 A) 在用作代码时将文本正确解释为字符串，并且 B) 引用数据中存在的任何 <code>'</code> .然后它使用 <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse" rel="noreferrer"><code>JSON.parse()</code></a> 将数据返回到内容脚本中的字符串.虽然这种编码不是严格要求的，但这是一个好主意，因为您不知道要发送到内容脚本的值的内容.这个值很容易会破坏你正在注入的代码(即用户可能在他们输入的文本中使用了 <code>'</code> 和/或 <code>"</code>).如果你这样做了不能以某种方式转义该值，存在可能导致执行任意代码的安全漏洞.<em class="showen"></em></p> <p class="en"><strong>Security issue:</strong><br> The following uses <code>"'" + JSON.stringify().replace(/\/g,'\\').replace(/'/g,"\'") + "'"</code> to encode the data into text which will be proper JSON when interpreted as code, prior to putting it in the <code>code</code> string. The <code>.replace()</code> methods are needed to A) have the text correctly interpreted as a string when used as code, and B) quote any <code>'</code> which exist in the data. It then uses <code>JSON.parse()</code> to return the data to a string in your content script. While this encoding is not strictly required, it is a good idea as you don't know the content of the value which you are going to send to the content script. This value could easily be something that would corrupt the code you are injecting (i.e. The user may be using <code>'</code> and/or <code>"</code> in the text they entered). If you do not, in some way, escape the value, there is a security hole which could result in arbitrary code being executed.</p> <p class="cn"><strong>来自您的弹出脚本:</strong></p> <ol class="cn"><li>注入一段简单的代码来设置一个包含数据的变量.</li><li>在 <a href="https://developer.chrome.com/extensions/tabs#method-executeScript" rel="noreferrer"><code>chrome.tabs.executeScript()</code> 的回调中</a>(<a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/API/tabs/executeScript" rel="noreferrer">MDN</a>)，调用<code>tabs.executeScript()</code> 注入您的脚本(注意:<code>tabs.executeScript()</code> 将按照您调用 <code>tabs.executeScript()<的顺序执行脚本/code>，只要它们的<code>runAt</code>值相同即可.因此，等待小<code>code</code>的回调不是严格要求的.</li><em class="showen"></em></ol> <ol class="en"> <li>Inject a simple piece of code that sets a variable to contain the data.</li> <li>In the callback for <code>chrome.tabs.executeScript()</code> (MDN), call <code>tabs.executeScript()</code> to inject your script (Note: <code>tabs.executeScript()</code> will execute scripts in the order in which you call <code>tabs.executeScript()</code>, as long as they have the same value for <code>runAt</code>. Thus, waiting for the callback of the small <code>code</code> is not strictly required).</li> </ol> <p class="cn"></p> <pre><code><code>var updateTextTo = document.getElementById('comments').value; chrome.tabs.executeScript({ code: "var newText = JSON.parse('" + JSON.stringify(updateTextTo).replace(/\/g,'\\').replace(/'/g,"\'") + "';" }, function () { chrome.tabs.executeScript({ file: "content_script3.js" }); }); </code></code></pre> <p class="cn"><strong>来自您的内容脚本:</strong></p> <ol class="cn"><li>使用存储在变量中的数据对 DOM 进行更改</li></ol> <p class="cn"></p> <pre><code><code>if (typeof newText === 'string') { Array.from(document.querySelectorAll('textarea.comments')).forEach(el => { el.value = newText; }); } </code></code></pre> <p class="cn">参见:注释 1、2 和3.<em class="showen"></em></p> <p class="en">See: Notes 1, 2, & 3.</p> <p class="cn">这需要您的内容脚本代码为弹出窗口或后台脚本(如果与 UI 的交互导致弹出窗口关闭)发送的消息安装侦听器.有点复杂.<em class="showen"></em></p> <p class="en">This requires your content script code to install a listener for a message sent by the popup, or perhaps the background script (if the interaction with the UI causes the popup to close). It is a bit more complex.</p> <p class="cn"><strong>来自您的弹出脚本:</strong></p> <ol class="cn"><li>使用 <a href="https://developer.chrome.com/extensions/tabs#method-query" rel="noreferrer"><code>tabs.query()</code><确定活动标签/a> (<a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/tabs/query" rel="noreferrer">MDN</a>).</li><li>调用 <a href="https://developer.chrome.com/extensions/tabs#method-executeScript" rel="noreferrer"><code>tabs.executeScript()</code></a> (<a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/API/tabs/executeScript" rel="noreferrer">MDN</a>)</li><li>在 <code>tabs.executeScript()</code> 的回调中，使用 <a href="https://developer.chrome.com/extensions/tabs#method-sendMessage" rel="noreferrer"><code>tabs.sendMessage()</code></a> (<a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/API/tabs/sendMessage" rel="noreferrer">MDN</a>)(需要知道 <code>tabId</code>)，将数据作为消息发送.</li><em class="showen"></em></ol> <ol class="en"> <li>Determine the active tab using <code>tabs.query()</code> (MDN).</li> <li>Call <code>tabs.executeScript()</code> (MDN)</li> <li>In the callback for <code>tabs.executeScript()</code>, use <code>tabs.sendMessage()</code> (MDN) (which requires knowing the <code>tabId</code>), to send the data as a message.</li> </ol> <p class="cn"></p> <pre><code><code>var updateTextTo = document.getElementById('comments').value; chrome.tabs.query({active: true, currentWindow: true}, function(tabs) { chrome.tabs.executeScript(tabs[0].id, { file: "content_script3.js" }, function(){ chrome.tabs.sendMessage(tabs[0].id,{ updateTextTo: updateTextTo }); }); }); </code></code></pre> <p class="cn"><strong>来自您的内容脚本:</strong></p> <ol class="cn"><li>使用 <a href="https://developer.chrome.com/extensions/runtime#event-onMessage" rel="noreferrer"><code>chrome.runtime.onMessage.addListener()</添加侦听器代码></a>(<a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/runtime/sendMessage" rel="noreferrer">MDN</a>)</li><li>退出您的主要代码，让侦听器保持活动状态.如果您愿意，您可以返回一个成功指示器.</li><li>收到包含数据的消息后:<em class="showen"></em></ol> <ol class="en"> <li>Add a listener using <code>chrome.runtime.onMessage.addListener()</code> (MDN)</li> <li>Exit your primary code, leaving the listener active. You could return a success indicator, if you choose.</li> <li>Upon receiving a message with the data: </ol> <ol class="cn"><li>对 DOM 进行更改</li><li>移除你的 <code>runtime.onMessage</code> 监听器</li></ol> <p class="cn"></li></p> <p class="cn">#3.2 是可选的.您可以让代码保持活动状态以等待另一条消息，但这会将您使用的范式更改为加载代码并保持驻留等待消息启动操作的范式.<em class="showen"></em></p> <p class="en">#3.2 is optional. You could keep your code active waiting for another message, but that would change the paradigm you are using to one where you load your code and it stays resident waiting for messages to initiate actions.</p> <pre><code><code>chrome.runtime.onMessage.addListener(assignTextToTextareas); function assignTextToTextareas(message){ newText = message.updateTextTo; if (typeof newText === 'string') { Array.from(document.querySelectorAll('textarea.comments')).forEach(el => { el.value = newText; }); } chrome.runtime.onMessage.removeListener(assignTextToTextareas); //optional } </code></code></pre> <p class="cn">参见:注释 1 &2.<em class="showen"></em></p> <p class="en">See: Notes 1 & 2.</p> <p class="cn">注意 1:使用 <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/from" rel="noreferrer"><code>Array.from()</code></a> 如果您没有多次这样做并且使用的是 <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/from#Browser_compatibility" rel="noreferrer">浏览器版本</a>(Chrome >= 版本 45，Firefox >= 32).在 Chrome 和 Firefox 中，<a href="https://jsperf.com/nodelist-to-array2" rel="noreferrer"><code>Array.from()</code> 与其他获取方法相比速度较慢一个来自 NodeList 的数组</a>.为了更快、更兼容地转换为数组，您可以使用 <a href="https://stackoverflow.com/a/40570301/3773011">这个答案中的 <code>asArray()</code> 代码</a>.该答案中提供的 <code>asArray()</code> 的第二个版本也更加健壮.<em class="showen"></em></p> <p class="en">Note 1: Using <code>Array.from()</code> is fine if you are not doing it many times and are using a browser version which has it (Chrome >= version 45, Firefox >= 32). In Chrome and Firefox, <code>Array.from()</code> is slow compared to other methods of getting an array from a NodeList. For a faster, more compatible conversion to an Array, you could use the <code>asArray()</code> code in this answer. The second version of <code>asArray()</code> provided in that answer is also more robust.</p> <p class="cn">注意 2:如果您愿意<a href="https://developer.mozilla.org/en-US/docs/Web/API/NodeList#Browser_compatibility" rel="noreferrer">将您的代码限制为Chrome 版本 >= 51 或 Firefox 版本 >= 50</a>，Chrome 有一个 <code>forEach()</code> 方法用于 <a href="https://developer.mozilla.org/en-US/docs/Web/API/NodeList" rel="noreferrer">NodeLists</a> 从 v51 开始.因此，您不需要转换为数组.显然，如果您使用不同类型的循环，则不需要转换为数组.<em class="showen"></em></p> <p class="en">Note 2: If you are willing to limit your code to Chrome version >= 51 or Firefox version >= 50, Chrome has a <code>forEach()</code> method for NodeLists as of v51. Thus, you don't need to convert to an array. Obviously, you don't need to convert to an Array if you use a different type of loop.</p> <p class="cn">注意 3:虽然我之前在自己的代码中使用过这种方法(将变量值注入脚本)，但我被提醒在阅读 <a href="https://stackoverflow.com/a/17591250/3773011">这个答案</a>.<em class="showen"></em></p> <p class="en">Note 3: While I have previously used this method (injecting a script with the variable value) in my own code, I was reminded that I should have included it here when reading this answer.</p> <p>这篇关于使用 executeScript() 将弹出窗口中的数据通信到弹出窗口注入的内容脚本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！</p> </div> <div class="arc-body-main-more"> <span onclick="unlockarc('2711694');">查看全文</span> </div> </div> <div> </div> <div class="wwads-cn wwads-horizontal" data-id="166" style="max-width:100%;border: 4px solid #666;"></div> </div> </article> <div id="arc-ad-2" class="mb-1"> <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-5038752844014834" crossorigin="anonymous"></script> <ins class="adsbygoogle" style="display:block" data-ad-format="autorelaxed" data-ad-client="ca-pub-5038752844014834" data-ad-slot="3921941283"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> <div class="widget bgwhite radius-1 mb-1 shadow widget-rel"> <h5>相关文章</h5> <ul> <li> <a target="_blank" title="将弹出式数据与内容脚本之间的数据通信，使用executeScript（）" href="/820973.html"> 将弹出式数据与内容脚本之间的数据通信，使用executeScript（）; </a> </li> <li> <a target="_blank" title="下载弹出窗口中的内容" href="/2480052.html"> 下载弹出窗口中的内容; </a> </li> <li> <a target="_blank" title="解析数据通信" href="/1242865.html"> 解析数据通信; </a> </li> <li> <a target="_blank" title="扩展程序弹出窗口中iframe的内容脚本或后台脚本" href="/2107075.html"> 扩展程序弹出窗口中iframe的内容脚本或后台脚本; </a> </li> <li> <a target="_blank" title="弹出窗口中的CountDownTimer" href="/1909548.html"> 弹出窗口中的CountDownTimer; </a> </li> <li> <a target="_blank" title="弹出窗口中的UIToolbar" href="/2002549.html"> 弹出窗口中的UIToolbar; </a> </li> <li> <a target="_blank" title="弹出窗口中的UIReferenceLibraryViewController" href="/941181.html"> 弹出窗口中的UIReferenceLibraryViewController; </a> </li> <li> <a target="_blank" title="弹出窗口中的疑问" href="/1368684.html"> 弹出窗口中的疑问; </a> </li> <li> <a target="_blank" title="弹出窗口中的弹出窗口，第二个弹出窗口没有焦点?" href="/1759025.html"> 弹出窗口中的弹出窗口，第二个弹出窗口没有焦点?; </a> </li> <li> <a target="_blank" title="数据通信pression算法" href="/63612.html"> 数据通信pression算法; </a> </li> <li> <a target="_blank" title="如何将按钮聚焦在弹出其他模态弹出窗口的模态弹出窗口中" href="/1249148.html"> 如何将按钮聚焦在弹出其他模态弹出窗口的模态弹出窗口中; </a> </li> <li> <a target="_blank" title="访问内容脚本和弹出窗口中使用的Chrome本地存储?" href="/1573629.html"> 访问内容脚本和弹出窗口中使用的Chrome本地存储?; </a> </li> <li> <a target="_blank" title="如何使用scriptmanager弹出窗口显示弹出窗口中的用户名" href="/1210628.html"> 如何使用scriptmanager弹出窗口显示弹出窗口中的用户名; </a> </li> <li> <a target="_blank" title="弹出窗口中的图表使用JQuery" href="/1156899.html"> 弹出窗口中的图表使用JQuery; </a> </li> <li> <a target="_blank" title="如何关闭父窗口中的弹出窗口?" href="/2188142.html"> 如何关闭父窗口中的弹出窗口?; </a> </li> <li> <a target="_blank" title="如何在 magnific popup 插件的弹出窗口中打开弹出窗口" href="/2848273.html"> 如何在 magnific popup 插件的弹出窗口中打开弹出窗口; </a> </li> <li> <a target="_blank" title="如何在popup插件中打开弹出窗口中的弹出窗口" href="/1017496.html"> 如何在popup插件中打开弹出窗口中的弹出窗口; </a> </li> <li> <a target="_blank" title="弹出窗口中的显示gridview" href="/1163481.html"> 弹出窗口中的显示gridview; </a> </li> <li> <a target="_blank" title="在弹出窗口中激活父窗口" href="/1759048.html"> 在弹出窗口中激活父窗口; </a> </li> <li> <a target="_blank" title="在窗口弹出窗口中设置标题" href="/1006794.html"> 在窗口弹出窗口中设置标题; </a> </li> <li> <a target="_blank" title="打开弹出窗口，单击链接，在父窗口中打开，关闭弹出窗口？" href="/1162848.html"> 打开弹出窗口，单击链接，在父窗口中打开，关闭弹出窗口？; </a> </li> <li> <a target="_blank" title="在弹出窗口中提交表单，然后关闭弹出窗口" href="/864533.html"> 在弹出窗口中提交表单，然后关闭弹出窗口; </a> </li> <li> <a target="_blank" title="从弹出窗口提交父窗口中的表单？" href="/870628.html"> 从弹出窗口提交父窗口中的表单？; </a> </li> <li> <a target="_blank" title="用户单击弹出窗口中的按钮后关闭弹出窗口反应传单" href="/2848464.html"> 用户单击弹出窗口中的按钮后关闭弹出窗口反应传单; </a> </li> <li> <a target="_blank" title="如何在弹出窗口中渲染Angular指令，使其与主窗口通信?" href="/1928488.html"> 如何在弹出窗口中渲染Angular指令，使其与主窗口通信?; </a> </li> </ul> </div> <div class="mb-1"> <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-5038752844014834" crossorigin="anonymous"></script> <ins class="adsbygoogle" style="display:block" data-ad-format="autorelaxed" data-ad-client="ca-pub-5038752844014834" data-ad-slot="3921941283"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> </div> <div class="side"> <div class="widget widget-side bgwhite mb-1 shadow"> <h5>前端开发最新文章</h5> <ul> <li> <a target="_blank" title="为什么Chrome（在Electron内部）突然重定向到chrome-error：// chromewebdata？" href="/1996151.html"> 为什么Chrome（在Electron内部）突然重定向到chrome-error：// chromewebdata？; </a> </li> <li> <a target="_blank" title="错误102（net :: ERR_CONNECTION_REFUSED）：服务器拒绝连接" href="/749568.html"> 错误102（net :: ERR_CONNECTION_REFUSED）：服务器拒绝连接; </a> </li> <li> <a target="_blank" title="如何解决'重定向已被CORS策略阻止：没有'Access-Control-Allow-Origin'标题'？" href="/1009885.html"> 如何解决'重定向已被CORS策略阻止：没有'Access-Control-Allow-Origin'标题'？; </a> </li> <li> <a target="_blank" title="如何处理“Uncaught（in promise）DOMException：play（）失败，因为用户没有首先与文档交互。”在桌面上使用Chrome 66？" href="/884909.html"> 如何处理“Uncaught（in promise）DOMException：play（）失败，因为用户没有首先与文档交互。”在桌面上使用Chrome 66？; </a> </li> <li> <a target="_blank" title="警告：添加非被动事件侦听器到滚动阻塞'touchstart'事件" href="/818517.html"> 警告：添加非被动事件侦听器到滚动阻塞'touchstart'事件; </a> </li> <li> <a target="_blank" title="如何在浏览器中播放.TS文件（视频/ MP2T媒体类型）？" href="/343346.html"> 如何在浏览器中播放.TS文件（视频/ MP2T媒体类型）？; </a> </li> <li> <a target="_blank" title="此请求已被阻止;内容必须通过HTTPS提供" href="/886417.html"> 此请求已被阻止;内容必须通过HTTPS提供; </a> </li> <li> <a target="_blank" title="资源解释为样式表，但转换为MIME类型text / html（似乎与web服务器无关）" href="/562873.html"> 资源解释为样式表，但转换为MIME类型text / html（似乎与web服务器无关）; </a> </li> <li> <a target="_blank" title="通过HTTPS加载页面但请求不安全的XMLHttpRequest端点" href="/885901.html"> 通过HTTPS加载页面但请求不安全的XMLHttpRequest端点; </a> </li> <li> <a target="_blank" title="拒绝从执行脚本'*'，因为它的MIME类型（“应用/ JSON'）不是可执行文件，并严格MIME类型检查被启用。" href="/47347.html"> 拒绝从执行脚本'*'，因为它的MIME类型（“应用/ JSON'）不是可执行文件，并严格MIME类型检查被启用。; </a> </li> </ul> </div> <div class="widget widget-side bgwhite mb-1 shadow"> <h5> 热门教程 </h5> <ul> <li> <a target="_blank" title="Java教程" href="/OnLineTutorial/java/index.html"> Java教程 </a> </li> <li> <a target="_blank" title="Apache ANT 教程" href="/OnLineTutorial/ant/index.html"> Apache ANT 教程 </a> </li> <li> <a target="_blank" title="Kali Linux教程" href="/OnLineTutorial/kali_linux/index.html"> Kali Linux教程 </a> </li> <li> <a target="_blank" title="JavaScript教程" href="/OnLineTutorial/javascript/index.html"> JavaScript教程 </a> </li> <li> <a target="_blank" title="JavaFx教程" href="/OnLineTutorial/javafx/index.html"> JavaFx教程 </a> </li> <li> <a target="_blank" title="MFC 教程" href="/OnLineTutorial/mfc/index.html"> MFC 教程 </a> </li> <li> <a target="_blank" title="Apache HTTP客户端教程" href="/OnLineTutorial/apache_httpclient/index.html"> Apache HTTP客户端教程 </a> </li> <li> <a target="_blank" title="Microsoft Visio 教程" href="/OnLineTutorial/microsoft_visio/index.html"> Microsoft Visio 教程 </a> </li> </ul> </div> <div class="widget widget-side bgwhite mb-1 shadow"> <h5> 热门工具 </h5> <ul> <li> <a target="_blank" title="Java 在线工具" href="/Onlinetools/details/4"> Java 在线工具 </a> </li> <li> <a target="_blank" title="C(GCC) 在线工具" href="/Onlinetools/details/6"> C(GCC) 在线工具 </a> </li> <li> <a target="_blank" title="PHP 在线工具" href="/Onlinetools/details/8"> PHP 在线工具 </a> </li> <li> <a target="_blank" title="C# 在线工具" href="/Onlinetools/details/1"> C# 在线工具 </a> </li> <li> <a target="_blank" title="Python 在线工具" href="/Onlinetools/details/5"> Python 在线工具 </a> </li> <li> <a target="_blank" title="MySQL 在线工具" href="/Onlinetools/Dbdetails/33"> MySQL 在线工具 </a> </li> <li> <a target="_blank" title="VB.NET 在线工具" href="/Onlinetools/details/2"> VB.NET 在线工具 </a> </li> <li> <a target="_blank" title="Lua 在线工具" href="/Onlinetools/details/14"> Lua 在线工具 </a> </li> <li> <a target="_blank" title="Oracle 在线工具" href="/Onlinetools/Dbdetails/35"> Oracle 在线工具 </a> </li> <li> <a target="_blank" title="C++(GCC) 在线工具" href="/Onlinetools/details/7"> C++(GCC) 在线工具 </a> </li> <li> <a target="_blank" title="Go 在线工具" href="/Onlinetools/details/20"> Go 在线工具 </a> </li> <li> <a target="_blank" title="Fortran 在线工具" href="/Onlinetools/details/45"> Fortran 在线工具 </a> </li> </ul> </div> </div> </div> <script type="text/javascript">var eskeys = '使用,executescript,将,弹出,窗,口中,的,数据通,信到,弹出,窗口,注入,的,内容,脚本'; var cat = 'cc';';//qianduan</script> </div> <div id="pop" onclick="pophide();"> <div id="pop_body" onclick="event.stopPropagation();"> <h6 class="flex flex101"> 登录 <span onclick="pophide();">关闭</span> </h6> <div class="pd-1"> <div class="wxtip center"> <span>扫码关注<em>1秒</em>登录</span> </div> <div class="center"> <img id="qr" src="https://huajiakeji.com/Content/Images/qrydx.jpg" alt="" style="width:150px;height:150px;" /> </div> <div style="margin-top:10px;display:flex;justify-content: center;"> <input type="text" placeholder="输入验证码" id="txtcode" autocomplete="off" /> <input id="btngo" type="button" onclick="chk()" value="GO" /> </div> <div class="center" style="margin: 4px; font-size: .8rem; color: #f60;"> 发送“验证码”获取 <em style="padding: 0 .5rem;">|</em> <span style="color: #01a05c;">15天全站免登陆</span> </div> <div id="chkinfo" class="tip"></div> </div> </div> </div> <script type="text/javascript" src="https://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script> <script type="text/javascript" src="https://cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.min.js"></script> <script type="text/javascript" src="https://img01.yuandaxia.cn/Scripts/highlight.min.js"></script> <script type="text/javascript" src="https://img01.yuandaxia.cn/Scripts/base.js?v=0.22"></script> <script type="text/javascript" src="https://img01.yuandaxia.cn/Scripts/tui.js?v=0.11"></script> <footer class="footer"> <div class="container"> <div class="flink mb-1"> 友情链接： <a href="https://www.it1352.com/" target="_blank">IT屋</a> <a href="https://huajiakeji.com/" target="_blank">Chrome插件</a> <a href="https://www.cnplugins.com/" target="_blank">谷歌浏览器插件</a> </div> <section class="copyright-section"> <a href="https://www.it1352.com" title="IT屋-程序员软件开发技术分享社区">IT屋</a> ©2016-2022 <a href="http://www.beian.miit.gov.cn/" target="_blank">琼ICP备2021000895号-1</a> <a href="/sitemap.html" target="_blank" title="站点地图">站点地图</a> <a href="/Home/Tags" target="_blank" title="站点标签">站点标签</a> <a target="_blank" alt="sitemap" href="/sitemap.xml">SiteMap</a> <a href="/1155981.html" title="IT屋-免责申明"><免责申明></a> 本站内容来源互联网,如果侵犯您的权益请联系我们删除. </section>  <script type="text/javascript"> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?0c3a090f7b3c4ad458ac1296cb5cc779"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> <script type="text/javascript"> (function () { var bp = document.createElement('script'); var curProtocol = window.location.protocol.split(':')[0]; if (curProtocol === 'https') { bp.src = 'https://zz.bdstatic.com/linksubmit/push.js'; } else { bp.src = 'http://push.zhanzhang.baidu.com/push.js'; } var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(bp, s); })(); </script> </div> </footer> </body> </html>