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>
Related
Can someone help me? I wrote simple code in javascript and it wont work for some reason. I tried to figure out but i cant see why. I have downloaded jquery and it is all ok with it, also i tried only javascript code and still same problem. Browser is ok it load jquery and javascript on file i made earlier but doesnt load on this.Here is code:
<!DOCTYPE html>
<html>
<head>
<title>Proba</title>
<script src="jquery-3.3.1.js">
$('#btn').click(function f() {
console.log(1);
});
</script>
</head>
<body>
<button id="btn">Click</button>
</body>
</html>
<head>
<title>Proba</title>
</head>
<body>
<button id="btn">Click</button>
<script src="jquery-3.3.1.js"></script>
<script>
$(document).ready(function(){
$("#btn").click(function(
console.log(1);
))
})
</script>
</body>
Try like this :)
You are binding your event handler, before the browser was able to parse your HTML. So #btn element is not in the DOM yet at this point.
Either wrap you code inside document.ready or move the script to the bottom of the body tag.
1st Approach
<head>
<title>Proba</title>
<script src="jquery-3.3.1.js"></script>
<script>
$(function() {
$('#btn').click(function f() {
console.log(1);
});
});
</script>
</head>
<body>
<button id="btn">Click</button>
</body>
2nd Approach
<head>
<title>Proba</title>
<script src="jquery-3.3.1.js"></script>
</head>
<body>
<button id="btn">Click</button>
<script>
$('#btn').click(function f() {
console.log(1);
});
</script>
</body>
Have you verified "jquery-3.3.1.js" really exists in the current directory? Try instead loading the script through a known host, like Google:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
EDITED: Added working code. Note button checking must be done when document has finally loaded.
<!DOCTYPE html>
<html>
<head>
<title>Proba</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#btn").click(function() {
console.log(2);
});
})
</script>
</head>
<body>
<button id="btn">Click</button>
</body>
</html>
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
I already fail at a seemingly basic task in javascript - changing a div's content by a script. Please help me understand where I am going wrong. Here is a minimal example that's not working for me:
<!DOCTYPE html>
<html>
<head>
<script>
document.getElementById('id').innerHTML = "test";
</script>
</head>
<body>
<div id="id" >blub</div>
</body>
</html>
The Problem with you code it that the JavaScript code is executed before the div part is loaded fully. To fix this change you code to:
<!DOCTYPE html>
<html>
<head>
<script>
function changeDiv()
{
document.getElementById('id').innerHTML = "test";
}
</script>
</head>
<body onload="changeDiv();">
<div id="id" >blub</div>
</body>
</html>
The onload event will only fire when the html is fully loaded.
HTML files load starting at the top to the bottom of the html.
In your example, the javascript executes before the <body> tag exists in the DOM.
Moving the javascript to below the relevant html makes it work as you would expect.
Another option would be to keep the script inside the <head> but delay it from executing until the DOM is loaded
window.onload = function() {
document.getElementById('id').innerHTML = "test";
};
https://developer.mozilla.org/en/docs/Web/API/GlobalEventHandlers/onload
<!DOCTYPE html>
<html>
<head></head>
<body>
<div id="id" >blub</div>
<script>
document.getElementById('id').innerHTML = "test";
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="id" >blub</div>
<script>
document.getElementById('id').innerHTML = "test";
</script>
</body>
</html>
put your script after the div.
You need to use window.onload to call your code when html is fully loaded:
<!DOCTYPE html>
<html>
<head>
<script>
window.onload = function() {
document.getElementById('id').innerHTML = "test";
};
</script>
</head>
<body>
<div id="id" >blub</div>
</body>
</html>
Your Dom is no not loaded.. Place your script tag at the end before
Just add the script tag before closing the body. It'll work.
You have to write the Javascript after the div-Tag. First the DOM needs to be loaded and after you can change the content inside the DIV.
Place your Javascript before the closing-body Tag
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>
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