检查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>