1

When I open (for example) Chrome's developer tool I can inspect an element by clicking on it (and the tool highlights that for me as well). It shows me it's html tag and the class or ID in the first place. Is it possible to have the same funcionality on my website, but without using a developer tool?

Example:

you pick an url, and my website shows it in an iframe. My goal is to get a html element's class/id shown in the iframe, just by clicking on it.

K.Gabor
  • 69
  • 7

2 Answers2

1

Yes. You would need to use JavaScript.

Something like this:

    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>

The OP requested a version of this where an external website is loaded via iframe and then utilizes the functionality of the "dev window" In the comments below I explained how this is not possible due to unmatched host names (CORS security issue), but if these settings were disabled on a local browser, here is how it might be done.

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>
scramlo
  • 85
  • 6
  • That is almost what i'm looking for. The functionality is perfect, but is it possible to use your code on a different website shown in my div? Like: `
    ` And get stackoverflow's element's id?     – K.Gabor Aug 11 '17 at 09:25
  • 1
    I am sorry this is not possible. The reason being, we cannot run JavaScript on a website that is not using the same host name. It is a security feature. Now, you can use an updated code I will put below my original code, but you'll need to disable some security settings on your browser. Please see this post for more information: https://stackoverflow.com/questions/25098021/securityerror-blocked-a-frame-with-origin-from-accessing-a-cross-origin-frame – scramlo Aug 11 '17 at 14:29
  • Always be weary of implementing code that only works if you disable or modify your security settings. – Tom O. Aug 11 '17 at 14:54
  • Thanks guys! And from a different approach, if I "steal" the complete website with css and js files, then load it into my div, that would do the trick, right? – K.Gabor Aug 12 '17 at 15:44
0

Something like this?

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>
Tom O.
  • 5,133
  • 2
  • 19
  • 33
  • Something like that, but the element's id I'm looking for is NOT on my domain, it's a random website I'd like to show in a div/iframe/whatever on my own webpage. Think that is possible? – K.Gabor Aug 11 '17 at 09:30
  • 1
    From what I understand, accessing the contents from an i-frame is not possible if they are not under the same domain [(see same-origin policy wiki)](https://en.wikipedia.org/wiki/Same-origin_policy). Also take a look at these similar SO questions: [How to get the body's content of an iframe in Javascript?](https://stackoverflow.com/questions/926916/how-to-get-the-bodys-content-of-an-iframe-in-javascript) and [Understanding Cross-Domain issue in Iframes](https://stackoverflow.com/questions/14197653/understanding-cross-domain-issue-in-iframes) – Tom O. Aug 11 '17 at 14:47