Javascript file inside iFrame do not get executed when iFrame refreshes - javascript

Is there any reason why the javascript file ( app.js ) which is used inside my iframe do not get executed when my iFrame refreshes?
Basically what's happening now is:
When I first load index.html , the javascript app.js output "hello world" to the console, but then once the iframe gets automatically refreshed ( through reloader.js ) everything refreshes but the javascript, what I mean is, once the iframe is refreshed I don't get a new "hello world".
Does anyone passed through the same issue?
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>treedux - Development Server</title>
<script src="reloader.js"></script>
<script>
</script>
</head>
<body>
<div class="topbar">
<div class="icon-menu"></div>
3dux.io Header
</div>
<iframe id="treeduxwrapper" class="iframe" src="iframe.html"></iframe>
</body>
</html>
iframe.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>treedux - Development Server</title>
<script type="text/javascript" src="app.js"></script>
</head>
<body>
<div class="topbar">
<div class="icon-menu"></div>
CONTENT
</div>
</body>
</html>
app.js
console.log('hello world')
Thanks in advance,
TF

Try to reload by this,
document.getElementById('treeduxwrapper').contentWindow.location.href = "iframe.html"

I think the issue is you have kept your reloader.js in the index.html which will reload the current page(index.html) only, not the iframe.html. So in short your iframe.html is not getting reload on every reload of index.html.

Related

Why does <script> appear in <body> when I defined it outside of <body>?

I'm busy pumping out some web projects from the Odin Project. Anyway, I'd like to adhere to the software engineering process of taking small steps and testing them. Now, for instance, I'd like to see the output of document.querySelector("body"). It is my understanding that I should place the tag somewhere, I'm not too sure what the best place is. The StackOverflow posts on this topic are quite ambiguous. Here's my code:
index.html:
<!DOCTYPE html>
<html>
<head>
<title>Etch-A-Sketch</title>
<meta charset="UTF-8"/>
</head>
<body>
</body>
<script type="text/javascript" src="createDOM.js"></script>
</html>
createDOM.js:
const body = document.querySelector("body");
console.log(body);
Console:
<body>
<script type="text/javascript" src="createDOM.js"></script>
</body>
Me:
$ ????????
It is the way webengine play with source. Most ( and almost all ) webengine put everything into body that can be ( i.e following the standard ) because body is taken as subroot for DOM structure
Wrapp your script inside the body tag, at the end.
<!DOCTYPE html>
<html>
<head>
<title>Etch-A-Sketch</title>
<meta charset="UTF-8"/>
</head>
<body>
<script type="text/javascript" src="createDOM.js"</script>
</body>
</html>

Access variable from iframe without editing iframe page

I want to access variable from iframe without editing iframeContent.html page. I don't know why alert window still shows 'undefined'
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript">
var iframe0=0;
var iframe0document=0;
var inputIframe=0;
function getIframeText() {
var iframe0 = document.getElementById("iframe123");
var iframe0document=iframe0.contentDocument||iframe0.contentWindow.document;
var inputIframe = iframe0document.getElementById("wynik2");
alert(inputIframe.value);
};
</script>
</head>
<body>
<div>
<button onclick="getIframeText()">get iframe text</button>
<iframe id="iframe123" src="iframeContent.html" >
</div>
</body>
</html>
iframeContent.html:
<html>
<head>
<title>IFrame Child Example</title>
<script type="text/javascript">
var asd="12";
</script>
</head>
<body>
<div id="wynik2"></div>
<script type="text/javascript">
document.getElementById("wynik2").innerHTML=asd;
</script>
</body>
</html>
Frame on parent page looks good (shows number 12). I'm testing my page on Chrome but through command window typing 'allow file access from files'. So this isn't problem. Global variables are also set (am I doing it right?) so I don't know why is still udefined.
use inputIframe.innerText instead of inputIframe.value . "wynik2" is a div, right? cheers! :)

Does loading scripts dynamically block the rendering?

I'm trying to load bootstrap.min.js file.
I have two options.
The first one is to load it from a remote server:
<!DOCTYPE html>
<html lang='ru'>
<head>
<meta charset='utf-8'>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
</head>
<body>
...
</body>
</html>
The second one is to load it from my server:
<!DOCTYPE html>
<html lang='ru'>
<head>
<meta charset='utf-8'>
<script src="js/bootstrap.min.js"></script>
</head>
<body>
...
</body>
</html>
In the first case the script will load asynchronously which means the rendering of my page won't be blocked.
In the second case the script will block the rendering of my page. Am I correct?
How will blootstrap.min.js be loaded (async or sync) if I try to do this :
<!DOCTYPE html>
<html lang='ru'>
<head>
</head>
<body>
<script>
var bootstrap = document.createElement('script');
bootstrap.src = "http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js";
var head = document.getElementsByTagName('head')[0];
head.appendChild(bootstrap);
</script>
...
</body>
</html>
And this:
<!DOCTYPE html>
<html lang='ru'>
<head>
</head>
<body>
<script>
var bootstrap = document.createElement('script');
bootstrap.src = "js/bootstrap.min.js";
var head = document.getElementsByTagName('head')[0];
head.appendChild(bootstrap);
</script>
...
</body>
</html>
I have a hunch that in both cases the rendering won't be blocked. What do you think? Thanks!
If you put the source-loading code at the end of your <body> tag, the rendering won't be blocked, even though the new script tags are appended to the head. That's because most of the rendering is already done when you get to that part.
In newer browsers, you can add an async attribute to the script tag, which will not block rendering. So I suspect loading the file asynchronously via JS will not block rendering either, even if you do it near the top of the file.

How to avoid including same file in Iframe?

I have a webpage that includes a Javascript file(pqrs.js) , I have a iframe in the same page that needs same js file , so we need to include or download same file twice . There is any way to avoid this .
Domain for Iframe and main page is same .
As fooo.com/xyz contains an iframe
foo.com/xyz
<!doctype>
<html>
<head>
<script src='http://localhost/code/public/js/imageuploader.js'></script>
</head>
<body>
<iframe>
<!doctype>
<html>
<head>
<script src='http://localhost/code/public/js/imageuploader.js'></script>
</head>
<body>
</body>
</html>
<iframe>
</body>
</html>

Can I use cross-origin resources within a subdomain?

I would like to know if the following is possible:
Let's say my website = www.mywebsite.com
The code looks like:
<!DOCTYPE html>
<html lang="en">
<head>
...some stuff...
</head>
<body>
<div id="testDiv"></div>
<iframe src="//widget.mywebsite.com/widget.php"></iframe>
...some stuff...
</body>
</html>
The page: //widget.mysite.com/widget.php looks like:
<!DOCTYPE html>
<html lang="en">
<head>
...some stuff...
</head>
<body>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script src="someactions.js"></script>
</body>
</html>
I would like to access the div with id testDiv from //widget.mywebsite.com/widget.php
Is this possible when there is another subdomain (so widget. instead of www.) and another ip for widget. and www. ?
Thanks!
This is possible. You just have to ensure that both the parent page and the page in the iframe set the same document.domain
document.domain = "mysite.com"

Categories