有没有办法获取 iframe 加载的页面的源代码?我不想更改任何代码,我只想阅读它。我还需要能够使用 javascript/html 来获取它。
原文由 Franz Payer 发布,翻译遵循 CC BY-SA 4.0 许可协议
有没有办法获取 iframe 加载的页面的源代码?我不想更改任何代码,我只想阅读它。我还需要能够使用 javascript/html 来获取它。
原文由 Franz Payer 发布,翻译遵循 CC BY-SA 4.0 许可协议
<html>
<head>
<title>source code viewer</title>
<meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://CodeMirror.net/addon/hint/anyword-hint.js" id="anyword"></script>
<link rel="stylesheet" href="https://CodeMirror.net/lib/codemirror.css">
<link rel="stylesheet" href="https://CodeMirror.net/theme/DE.css">
<link rel="stylesheet" href="https://CodeMirror.net/addon/hint/show-hint.css">
<link rel="stylesheet" href="https://CodeMirror.net/addon/dialog/dialog.css">
<link rel="stylesheet" href="https://CodeMirror.net/addon/search/matchesonscrollbar.css">
<script src="https://CodeMirror.net/lib/codemirror.js"></script>
<script src="https://CodeMirror.net/addon/edit/closetag.js"></script>
<script src="https://CodeMirror.net/addon/hint/show-hint.js"></script>
<script src="https://CodeMirror.net/addon/hint/sql-hint.js"></script>
<script src="https://CodeMirror.net/addon/mode/loadmode.js"></script>
<script src="https://CodeMirror.net/mode/meta.js"></script>
<script src="https://CodeMirror.net/addon/hint/xml-hint.js"></script>
<script src="https://CodeMirror.net/addon/hint/html-hint.js"></script>
<script src="https://CodeMirror.net/addon/search/jump-to-line.js"></script>
<script src="https://CodeMirror.net/addon/hint/javascript-hint.js"></script>
<script src="https://CodeMirror.net/mode/xml/xml.js"></script>
<script src="https://CodeMirror.net/mode/javascript/javascript.js"></script>
<script src="https://CodeMirror.net/mode/css/css.js"></script>
<script src="https://CodeMirror.net/mode/htmlmixed/htmlmixed.js"></script>
<script src="https://CodeMirror.net/addon/dialog/dialog.js"></script>
<script src="https://CodeMirror.net/addon/search/searchcursor.js"></script>
<script src="https://CodeMirror.net/addon/search/jump-to-line.js"></script>
<script src="https://CodeMirror.net/addon/search/search.js"></script>
<script src="https://CodeMirror.net/addon/scroll/annotatescrollbar.js"></script>
<script src="https://CodeMirror.net/addon/search/matchesonscrollbar.js"></script>
<style>
#window{
margin-left:-22px;
margin-top: -40px;
border: none;
width:394px;
height:660px;
}
.preview-nav{
margin-left:-33px;
margin-top:-100px;
background: #00002c;
position: fixed;
height:62px;
width:415px;
}
.Run{
z-index:3;
display:none;
padding-top:100px;
position:fixed;
left:0;
top:0;
width:100%;
height:100%;
overflow:auto;
background-color:#ffffff;
}
.Run-content{
border-radius:8px;
margin:auto;
background-color:#ffffff;
position:relative;
padding:0;
outline:0;
width:350px;
height:300px;
color:#000000;
}
.ncolor{
background: none;
border: none;
}
.cm-keyword{
color: red;
}
</style>
</head>
<body bgcolor="#000000">
<table border="0">
<tr><td><input type="url" autocomplete="off" id="url" placeholder="URL...." oninput="Get()"></td><td><button onclick="document.getElementById('Run').style.display='block'" style="margin-top:-50px;" class="bbotton"><img src="icons/browser.png" width="45" height="45"></button></td><td><button class="Save" onclick="Save()"><img src="icons/GDownload.png" width="50" height="48"></button></td></tr>
</table>
<div id="SourceCode" onclick="editor.execCommand('autocomplete')"></div>
<div id="tools">
<button style="margin-top:-46px;margin-left:30px;position:fixed;" class="ncolor" onclick="find()"><img src="icons/search.png" width="40" height="40"></button>
</div>
<script>
var editor = CodeMirror(document.getElementById('SourceCode'), {
mode: 'text/html',
lineNumbers: true,
theme: 'DE',
});
</script>
<script>
function viewsource() {
editor.setValue(document.getElementById('window').contentWindow.document.documentElement.innerHTML);
}
function Get() {
document.getElementById('window').src= document.getElementById('url').value;
}
function Save() {
var textToWrite = editor.getValue();
var textFileAsBlob = new Blob([textToWrite], {
type: ''
});
var fileNameToSaveAs = document.getElementById('url').value;
var downloadLink = document.createElement("a");
downloadLink.download = fileNameToSaveAs;
downloadLink.innerHTML = "Download File";
if (window.webkitURL && window.webkitURL.createObjectURL) {
// Chrome allows the link to be clicked
// without actually adding it to the DOM.
downloadLink.href = window.webkitURL.createObjectURL(textFileAsBlob);
} else {
// Firefox requires the link to be added to the DOM
// before it can be clicked.
downloadLink.href = window.URL.createObjectURL(textFileAsBlob);
downloadLink.onclick = destroyClickedElement;
downloadLink.style.display = "none";
document.body.appendChild(downloadLink);
}
downloadLink.click();
}
function destroyClickedElement(event) {
document.body.removeChild(event.target);
}
function find() {
editor.execCommand('find');
}
function AC() {
editor.execCommand('autocomplete');
}
</script>
<div id="Run" class="Run">
<div class="Run-content">
<div>
<nav class="preview-nav">
<button class="ncolor" onclick="document.getElementById('Run').style.display='none';"><img src="icons/Close.png" width="50" height="50"></button>
</nav>
<iframe id="window" onload="viewsource()" onerror="error()"></iframe>
</div>
</div>
</div>
</body>
</html>
但是除非要下载的文件位于设备本地,否则无法显示源,例如:-如果您尝试它不会工作,因为出于安全目的,只有在要包含的文件是位于设备本地
原文由 Zezo Android 发布,翻译遵循 CC BY-SA 4.0 许可协议
13 回答13k 阅读
7 回答2.1k 阅读
3 回答1.3k 阅读✓ 已解决
6 回答1.2k 阅读✓ 已解决
2 回答1.4k 阅读✓ 已解决
3 回答1.3k 阅读✓ 已解决
2 回答1.5k 阅读✓ 已解决
适用于 Firefox、Chrome、Opera、IE9 beta