I don't get what you mean by that... If for "page" you mean an .html file, well... You can load the file, then parse it and do a regular querySelector .

fetch('/page.html')
    .then(res => res.text())
    .then(text => {
        const parser = new DOMParser()
        const page = parser.parseFromString(text, 'text/html')
        const element = page.querySelector('.some-class')
        /* Do something with your element */
    })

There can be 2 things you are mentioning here:

Either you are parsing a html file within main document
Or want access between 2 windows

--1--

For 1. Nicolas gave an answer to you. Additionally in legacy browsers where DOM parser is not there you can create a 'dummy' html element with unknown tag:

var mock = document.createElement("mock");
if the html is trusted:

mock.innerHTML = someRawHTML;

if not:

mock.innerHTML = someRawHTML.replace(/src\s*=\s*"[^"]*\s*"|url\s*\([^)]*\s*\)/gi,"");

You can include the href in the regex if you want as well.

--2--

For 2. You need either of 2 things. If you opened it via window.open:

targetWindow = window.open("somepage.com");

The targetWindow points out the window object. From there window.self points to yourself (opener) and window.window points out the the other page's window object provided that the origins are SAME.

Another way is you open the the other page within your current page as an iframe.

To be able to this your htaccess/main apache configuration or equivalent has to add the header:

Header set X-Frame-Options SAMEORIGIN

Or if the header is not present, all domains are allowed by default. Then you do:

iframe = document.createElement("iframe");
iframe.src = "somepage.com"
document.insertBefore(iframe);
iframe.contentWindow // this should point out the window object IF the origins are the same

If the same origin policy is a problem for you, I suggest you use fileGetContents (I omited the underscores) or curl of PHP or equivalent to first scape the site and then parse it.

Dear Ibrahim,

thank you for your response. For betting understanding my concern and requirement, kindly go through my codes below:

page1:

<!doctype html>
<html>   
  <head>       
  <title></title>    
 </head>      
<body>         
Page2 Image count:<span id="newcount"></span>      
</body>
 </html>

page2:

<!doctype html>
<html>     
<head>         
<title>images count</title>         
<script src="ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>         <script>            
 $(document).ready(function(){
               $("#count").html($(".galery img").length);            
 });          
</script>     
</head>      
<body>        
 <div id="box">            
 <p style="padding: 20px;">Images Count:<span id="count"></span></p>   
</div>        
<div class="galery">           
<img src="download.png">           
<img src="download.png">           
<img src="download.png">           
<img src="download.png">           
</div>      
 </body> 
</html>

Now i want the count of images in page2 need to be display in page1. Kindly help me out in this issue.

thank you.

I don't get it.

If it's static content, you already know they are 4 images. You don't need javascript to count...

Now, if it's dynamic content and you are ranging over some array on the server and displaying those, your could easily show the count also.

Still, if you want to do it with javascript...

/* from page1 */
const countEl = document.getElementById('newcount')
fetch('/page2.html')
    .then(res => res.text())
    .then(text => {
        const parser = new DOMParser()
        const page = parser.parseFromString(text, 'text/html')
        const images = page.querySelectorAll('.galery img')
        countEl.textContent = String(images.length)
    })

Or if you want to share data between tabs, use the browser storage and the storage event.

/* from page2 */
const images = document.querySelectorAll('.galery img')
localStorage.setItem('count', String(images.length))

/* from page1 */
addEventListener('storage', ev => {
    if (ev.key !== 'count') return
    const countEl = document.getElementById('newcount')
    countEl.textContent = ev.newValue
})

I already have this as a solution in my reply. 3rd solution. The only difference is that querySelectorAll returns non-live NodeList whereas images will also meddle with the DOM and return live HTML-collection.

Search Hashnode

--1--

--2--