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>
Related
I am attempting to load content from a div on one page of my site to another page on my site on page-load.
The following (example) code seems to achieve that effectively.
However... how would I also include all of the CSS associated with the content?
Any help would be greatly appreciated.
SOURCE PAGE
<!DOCTYPE html>
<html>
<head lang="en">
<link rel="stylesheet" href="exampleStylesheet.css">
</head>
<body>
<div>SOURCE CONTENT HERE</div>
</body>
</html>
LANDING PAGE
<!DOCTYPE html>
<html>
<head lang="en">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
<div id="loadedContent"></div>
<script>
$('#loadedContent').load("contentToLoad.html"); <!-- loads other page's content -->
</script>
</body>
</html>
EXAMPLE CSS
body {
margin: 0;
background-color: blue;
}
A server process changes the content of a file readme.txt which is located in a users home directory (Linux Ubuntu 20.04 Server). I want to reflect the file content on the page without fully reloading the site. Therefore I tried AJAX in the index.php file:
<!DOCTYPE html>
<html>
<head>
<title>Read a File</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<?php
$reader = file_get_contents("/userhome/readme.txt");
echo $reader;
?>
<script type="text/javascript">
function readFile() {
$.get("index.php");
return false;
}
</script>
<button onclick="readFile()">Click me</button>
</body>
</html>
Shouldn't an AJAX GET request to the PHP file itself load the new content and display it on the page?
reader.php
<?php
$reader = file_get_contents("/userhome/readme.txt");
echo $reader;
?>
So basically after clicking the Read me button, the div with id read will be filled with the txt content
index.php
<!DOCTYPE html>
<html>
<head>
<title>Read a File</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<div id="read">
</div>
<script type="text/javascript">
$(document).ready(function(){
$("#load").click(function(){
$("#read").load("reader.php");
});
});
</script>
<button id="load">Read me</button>
</body>
</html>
there are many other solutions for this
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.
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 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"