檢查HTML元素沒有瀏覽器開發工具？

Question

當我打開（例如）Chrome的開發人員工具時，我可以通過單擊它來檢查某個元素（該工具也突出顯示了這一點）。它向我展示了它的HTML標籤以及首要的類或ID。 是否有可能在我的網站上具有相同的功能，但不使用開發人員工具？

例子：

你挑一個網址，我的網站上顯示它的iframe中。我的目標是通過單擊它來獲取iframe中顯示的html元素的類/ id。

Answer 1

像這樣？

https://jsfiddle.net/tommy_o/8sx0d693/6/

<div id="myCoolDiv"> 
    <p class="myCoolClass">This text will get replaced with the name of the div!</p> 
</div> 

<script type="text/javascript">  
    function showElementId(element) { 
     element.innerHTML = element.id; 
    } 

    showElementId(document.getElementById("myCoolDiv")); 
</script> 

Answer 2

是。您需要使用JavaScript。

事情是這樣的：

var h1s = document.getElementsByTagName("h1"); 
 
    var ps = document.getElementsByTagName('p'); 
 
    var imgs = document.getElementsByTagName('img'); 
 

 
    var developerWindow = document.getElementById("developer-window"); 
 

 
    function setUpListeners(tagCollection) { 
 
     for (var i=0;i<tagCollection.length;i++) { 
 
     tagCollection[i].addEventListener("pointerover", function() { 
 
      this.style.padding = "1rem"; 
 
      this.style.backgroundColor = "yellow"; 
 
      developerWindow.innerHTML = this + " id: " + this.id; 
 
     }); 
 

 
     tagCollection[i].addEventListener("pointerleave", function() { 
 
      this.style.padding = "initial"; 
 
      this.style.backgroundColor = "initial"; 
 
      developerWindow.innerHTML = ""; 
 
     }); 
 
     } 
 
    } 
 

 
    setUpListeners(h1s); 
 
    setUpListeners(ps); 
 
    setUpListeners(imgs);

body { 
 
    margin-bottom: 20%; 
 
} 
 

 
#developer-window { 
 
    border: 2px solid black; 
 
    border-bottom: none; 
 
    background-color: white; 
 
    height: 20%; 
 
    position: fixed; 
 
    bottom: 0; 
 
    width:98vw; 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
}

<h1 id="main-heading">My website</h1> 
 
<p id="first-paragraph">My first paragraph</p> 
 
<img id="featured-image" src="https://placehold.it/250x250"> 
 
<div id="developer-window"></div>

的OP請求版本的這個地方的外部網站通過iframe中加載，然後利用「開發窗口」在評論的功能下面我解釋了由於主機名稱不匹配（CORS安全問題），這是不可能的，但是如果在本地瀏覽器上禁用了這些設置，則可以這樣做。

function startDevTools() { 
 
var iframe = document.getElementById("website-iframe"); 
 
    var website = iframe.contentDocument; 
 
console.log(website); 
 
    var h1s = website.getElementsByTagName("h1"); 
 
    var ps = website.getElementsByTagName('p'); 
 
    var imgs = website.getElementsByTagName('img'); 
 

 
    var developerWindow = document.getElementById("developer-window"); 
 

 
    function setUpListeners(tagCollection) { 
 
     for (var i=0;i<tagCollection.length;i++) { 
 
     tagCollection[i].addEventListener("pointerover", function() { 
 
      this.style.padding = "1rem"; 
 
      this.style.backgroundColor = "yellow"; 
 
      developerWindow.innerHTML = this + " id: " + this.id; 
 
     }); 
 

 
     tagCollection[i].addEventListener("pointerleave", function() { 
 
      this.style.padding = "initial"; 
 
      this.style.backgroundColor = "initial"; 
 
      developerWindow.innerHTML = ""; 
 
     }); 
 
     } 
 
    } 
 

 
    setUpListeners(h1s); 
 
    setUpListeners(ps); 
 
    setUpListeners(imgs); 
 
}

body { 
 
    background-color: #eee; 
 
} 
 
iframe { 
 
    border: 5px dashed #ccc; 
 
    width:90vw; 
 
    height: 100vh; 
 
    margin: 2rem; 
 
    margin-bottom:20%; 
 
} 
 
#developer-window { 
 
    border: 2px solid black; 
 
    border-bottom: none; 
 
    height: 20%; 
 
    position: fixed; 
 
    bottom: 0; 
 
    width:98vw; 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
    background-color: white; 
 
}

<iframe id="website-iframe" src="http://nerdspecs.com" frameborder="0" onload="startDevTools()"></iframe> 
 
<aside id="developer-window"></aside>