获取 iframe 的源代码

新手上路,请多包涵

有没有办法获取 iframe 加载的页面的源代码?我不想更改任何代码,我只想阅读它。我还需要能够使用 javascript/html 来获取它。

原文由 Franz Payer 发布,翻译遵循 CC BY-SA 4.0 许可协议

阅读 682
2 个回答
document.getElementById('iframeID').contentWindow.document.body.innerHTML

适用于 Firefox、Chrome、Opera、IE9 beta

原文由 Šime Vidas 发布,翻译遵循 CC BY-SA 2.5 许可协议

    <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 许可协议

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题