能否通过编程获取HTML script标签加载的外部脚本(如turndown)内容?
能否获取已加载第三方外部脚本的源码?
可以实现,但无法直接从DOM的<script>标签中拿到内容(带src属性的外部脚本标签,innerHTML是空的,浏览器不会把远程源码注入到标签里),核心方案是重新发起请求获取脚本内容,以下是两种可行方式:
方法1:前端直接发起HTTP请求(生产环境可用)
利用fetch或XMLHttpRequest直接请求第三方脚本的URL,拿到响应文本就是源码。示例代码:
// 请求turndown脚本并获取源码 fetch('https://unpkg.com/turndown/dist/turndown.js') .then(response => { if (!response.ok) throw new Error('请求脚本失败'); return response.text(); }) .then(sourceCode => { // 将源码传递给iOS WebView的handler window.webkit.messageHandlers.yourCustomHandler.postMessage(sourceCode); }) .catch(error => console.error('获取源码出错:', error));
注意:需确保目标脚本的服务器允许跨域请求(像unpkg这类公开CDN一般都支持CORS),如果对方服务器没配置CORS,前端直接请求会被浏览器拦截,这时候可以换思路:把脚本URL传给iOS原生侧,由原生发起请求获取源码后再回传给WebView。
方法2:浏览器调试API获取(仅开发环境可用)
如果是开发调试场景,可以利用浏览器的调试协议API获取已加载脚本的源码,但这种方法依赖浏览器调试能力,不能用于生产环境,示例代码(以Chrome为例):
// 仅开发调试用,生产环境不可靠 (async () => { const scripts = await new Promise(resolve => { chrome.debugger.sendCommand({tabId: chrome.devtools.inspectedWindow.tabId}, 'Debugger.getScripts', {}, resolve); }); const turndownScript = scripts.scripts.find(s => s.url.includes('turndown.js')); if (turndownScript) { const sourceResult = await new Promise(resolve => { chrome.debugger.sendCommand({tabId: chrome.devtools.inspectedWindow.tabId}, 'Debugger.getScriptSource', {scriptId: turndownScript.scriptId}, resolve); }); console.log('脚本源码:', sourceResult.scriptSource); } })();
内容的提问来源于stack exchange,提问作者sudoExclamationExclamation
相关产品推荐
相关产品推荐

