Question

当我打开（例如）Chrome的开发者工具时，我可以通过点击它来检查元素（该工具也会为我突出显示）。它首先向我显示了它的html标签和类或ID。是否可以在我的网站上使用相同的功能，但不使用开发人员工具？

示例：

您选择了一个网址，我的网站会在iframe中显示该网址。我的目标是通过点击它来获取iframe中显示的html元素的类/ ID。

Answer 1

这样的东西？

<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。

这样的事情：

＆＃13;

    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);

＆＃13;

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;
}

＆＃13;

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

＆＃13;

OP请求通过iframe加载外部网站的版本，然后利用＆＃34;开发窗口的功能＆＃34;在下面的评论中，我解释了由于无法匹配的主机名（CORS安全问题）而无法实现这一点，但如果在本地浏览器上禁用了这些设置，则可以采用以下方式完成此操作。

＆＃13;

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); 
}

＆＃13;

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;
}

＆＃13;

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

＆＃13;

没有浏览器开发工具检查html元素？

2 个答案: