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"
Related
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>
I'm developing an extension for Microsoft Edge and have learned from the docs here https://learn.microsoft.com/en-us/microsoft-edge/extensions/guides/creating-an-extension#writing-a-more-complex-extension that I can use Javascript for data manipulation.
For some reason though, when I try to modify a DOM element like this:
<!DOCTYPE html>
<html>
<body>
<p></p>
<script type='text/javascript'>
document.getElementsByTagName('P')[0].innerHTML = 'something';
</script>
</body>
</html>
I get the desired result in any HTML / JAVASCRIPT interpreter but when I try to test it out in the extension the DOM manipulation isn't working. The p element isn't populated with 'something'. The manifest.json file is included in the extension folder I'm just not including it here as it's not relevant to the question.
How should I go about this ?
Update:
window.html:
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<link rel='stylesheet' href='window.css'>
</head>
<body>
<div><p></p></div>
<script src="window.js"></script>
</body>
</html>
window.js:
window.onload() {
document.getElementsByTagName('P')[0].innerHTML = 'hakuna matata';
};
You should import the JavaScript function using <script> tag like below:
In myfunction.js file of js folder:
document.getElementsByTagName('p')[0].innerHTML = 'something';
In html file:
<!DOCTYPE html>
<html>
<body>
<p></p>
<script src="js/myfunction.js"></script>
</body>
</html>
I tested it in Edge extension: If we use the JavaScript function directly in the html page then it doesn't work. If we use a link to the js file then it works.
I use this bit of code:
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
</head>
<body>
<script>
window.setInterval("reloadIFrame();", 3000);
function reloadIFrame() {
document.getElementsByName("testFrame")[0].contentWindow.location.reload();
}
</script>
<iframe name="testFrame" src="https://docs.google.com/presentation/d/1jkNVBxAX57PjfxTNTkgO8zNnMFYoKUqUKQ4aJk8pCIs/embed?start=true&loop=true&delayms=5000" width="760px" height="920px"></iframe>
</body>
</html>
And it works well for some websites, but not for this google presntation.. What should I change to make it works?
You can try this instead, otherwise you will have a cross origin issue:
document.getElementsByName("testFrame")[0].src="https://docs.google.com/presentation/d/1jkNVBxAX57PjfxTNTkgO8zNnMFYoKUqUKQ4aJk8pCIs/embed?start=true&loop=true&delayms=5000";
regards
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.
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.