Stuck to resolve

JavaScript
1

Hey there! I have two pages. One named Main.html and another named Sub.html . I used the iframe tag to call Sub.html into Main.html. Now i need to change the contents in the Sub.html page with script wrote in Main.html. I tired the below way but, it didn’t worked for me. Is there any way to do that. Your help we be appreciated.

Main.html

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Main Page</title>
    <body>
   <iframe type='text/html' src='Sub.html'> 
</iframe>
    
</body>
    
<script>
  setTimeout(function(){  document.getElementsClassName('name')[0].innerHTML='RamVenk';
                          
                       }, 3000);

</script>

</html>

Sub.html

<html>
<head lang="en">
<meta charset="UTF-8">
<title>Main Page</title>
<body>
<div class="name">Chakri</div>
<div class="sname">Mittapalle</div>
<script>
</script>
</body>
</html>
2

I’ve edited your post for readability. When you enter a code block into the forum, precede it with a line of three backticks and follow it with a line of three backticks to make easier to read. See this post to find the backtick on your keyboard. The “preformatted text” tool in the editor (</>) will also add backticks around text.

markdown_Forums

3

sub.html is running in a completely different context, the JS in main.html doesn’t know anything about it. You need to access the iframes own document, you’re currently trying to access the document in main.html.

var iframe = document.querySelector('.myiframe').contentWindow;

iframe.querySelector('.name').innerHtml = 'New Name';

Also getElementsClassName isn’t a thing, it’s getElementsByClassName, and querySelector or querySelectorAll is generally easier and more obvious

An iframe is like a window into a different house. You can look through the window, but you can’t reach in and move the furniture around. If you own that house as well, you can move the furniture round, but you need to actually specify that you’re dealing with that house.

4

I’m getting the following error even after using the method you said
Uncaught DOMException: Blocked a frame with origin “null” from accessing a cross-origin frame.
at file:///D:/Chakrapani/Darksky%20Forecast%20App/Main.html:12:8

5

The browser thinks it’s possibly coming from somewhere different (ie you don’t own it), and will therefore prevent you making any changes. The origin of local files is null, as the error message is telling you, and the as the browser can’t tell what the origin is, security kicks in.

Running a local server from the root directory of your project will fix this issue immediately, as the origin then is localhost for both of the files.

Why do you need an iframe here? Is it necessary, because if at all possible, avoid using iframes for stuff you need to manipulate from outside the iframe unless you really need to use them, they are painful to work with (for very good reasons, but still)

6

In place of Sub.html i need to use https://darksky.net/widget/default/42.360082,-71.05888/us12/en.js?height=500&title=Full Forecast&textColor=333333&bgColor=FFFFFF&skyColor=333&fontFamily=Default&units=us&htColor=333333&ltColor=C7C7C7&displaySum=yes&displayHeader=yes url.
I’m not getting how to achieve that. Anyway thanks for your help DanCouper.

7

I assumed you would be trying something like this. Short answer:

You can’t do that. If you could then you would be able to break the internet. What you are trying to do is modify a website you do not control. Darksky can provide you with that widget, but you only get to use that widget in the way they have programmed it to work: there may be something in the widget configuration settings that allows something similar, but otherwise you get what you’re given. For “widget” read “a part of someone else’s webapp”: you aren’t free to change that webapp how you please.