I have given an example.
test.html:
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">
</head>
<body>
<h1>main window test</h1>
<iframe src="./iframe.html"></iframe>
</body>
</html>
iframe.html:
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
<h1>iframe testing</h1>
<script type="text/javascript">
$(document).ready(function() {
alert("window.location.href"+window.location.href);
});
</script>
</body>
</html>
In alert--> i am getting the iframe url "C:\Users\nn96589\Desktop\testfolder\iframe.html"
but, i need the main window URL which is "C:\Users\nc96589\Desktop\testfolder\test.html"
can anyone help me.
Thanks in advance.
Try utilizing document.referrer
<iframe src="data:text/html,<!DOCTYPE html><html><body><script>document.write(document.referrer)</script></body></html>">
</iframe>
Related
I'm trying to work on iFrame contents and the below snippet is not returning the value of h1 from the iFramed URL. Instead, it alerts undefined. Can someone please suggest what is wrong here?
<!doctype HTML>
<head>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<button id="myBtn">Login</button>
<br><br>
<iframe name="SSOBlock" id="SSOBlock" src="https://www.example.com/" ></iframe>
<script>
$("#myBtn").click(function(e) {
e.preventDefault();
alert($('iframe[name=SSOBlock]').contents().find('h1').html());
});
</script>
</body>
</html>
Is it possible to call and run a function in a page, lets say a.html from page b.html
page a.html is like below which has a function to update page background color
<!DOCTYPE html>
<html>
<head>
<title>Page A</title>
</head>
<body>
<h1>This is Page A</h1>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" referrerpolicy="no-referrer"></script>
<script>
function UpdatePageA(){
$("body").css("background-color","gold");
}
</script>
</body>
</html>
Page b.html is like
<!DOCTYPE html>
<html>
<head>
<title>Page B</title>
</head>
<body>
<h1>Update Page A from Here</h1>
<button type="button" class="btn update-page-a">Update Page A</button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" referrerpolicy="no-referrer"></script>
<script>
$(".update-page-a").on("click", function(){
UpdatePageA();
});
</script>
</body>
</html>
Option number 4 here: https://blog.bitsrc.io/4-ways-to-communicate-across-browser-tabs-in-realtime-e4f5f6cbedca
This is assuming that you have both tabs open. If you are talking about sequentially moving from a.html to b.html, then you could use query string parameters or local storage.
I am having a lot of trouble trying to add text to an existing <p> element using jQuery. I have tried many different methods but nothing has worked so far. Here is the code for the html file:
<!doctype html>
<html>
<head>
<script src="index1.js"></script>
<title>Drinking Game</title>
</head>
<body>
<button id="creategame" >Create game</button>
<p id="demo">Hello</p>
<script>
$(document).ready(function(){
$('#creategame').click(function(){
$("#demo").append("Test");
});
});
</script>
</body>
</html>
My guess is you don't load jQuery file, and the console has
$ is not defined
error. Simply, add
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
to <head> tag
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="index1.js"></script>
<title>Drinking Game</title>
</head>
You are missing the jQuery file. Add this code <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> to your file above the <script src="index1.js"></script>. Make sure it's above it because if it's not then you can't call the jQuery functions in the your index1.js file.
try using the .html() function:
$("#demo").html("Test");
The following worked for me.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<button id='createGame' class="btn btn-default">Click</button>
<p id="demo">Hello</p>
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<script>
$(document).ready(function() {
$("#createGame").click(function(){
$("#demo").append("Test");
});
});
</script>
</body>
</html>
You need to reference jQuery in a <script> tag somewhere.
An iframe is being created with the below line, whenever i am including dojo/enhancedgrid in my page:
<iframe src="javascript:'
<html>
<head>
<script>
if("loadFirebugConsole" in window){
window.loadFirebugConsole();
}
</script>
</head>
<body>
</body>
</html>'
">
Can anyone tell why it is created and how can i removed it?
Thanks in advance for any suggestion
I have a problem using jQuery inside an iFrame.
Here is my test setup:
index.html:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#A").contents().find('#B').addClass('Z');
});
</script>
</head>
<body>
<iframe id="A" src="test.html" style="width:700px; height: 1000px;" frameborder="0"></iframe>
</body>
</html>
test.html:
<html>
<head>
<title>test</title>
</head>
<body>
<div id="B">testcontent</div>
</body>
</html>
Normally when the page is loaded, in the source, "Z" should be added as a class, but it doesn't. Does anyone have an idea what the problem might be? Both files are in the same (local) folder.
try this
$("iframe").load(function(e){
$(this).contents().find('#B').addClass('Z');
});
You have to run it from a webserver with the HTTP scheme (http:// or https://).
Using the file scheme (file://) prevents this sort of cross frame access in some browsers.