My Google Chrome insists that my iframe is null. What's weird is that this returns the element without a hitch:
iframe = document.getElementById("main");
But then when I try to access any property of the iframe it says that I can't get a property from null (even through the element itself can be returned.)
I know I probably have to wait until it's loaded, but adding an event listener doesn't work because it gives me the same error.
EDIT: Some people asked for the context it is in...
<!DOCTYPE html>
<html>
<head>
<script src="index.js"></script>
<link href="index.css" rel="stylesheet" type="text/css" />
</head>
<body onload="start()">
<noscript>Your browser is ancient and doesn't support JavaScript.</noscript>
<table>
<tr>
<th colspan=10 rowspan=1><h1>TITLE</h1></th>
</tr>
<tbody>
<tr rowspan=2><td colspan=10> </td></tr>
<tr rowspan=10>
<td colspan=10>
<div class="codegena_iframe">
<iframe src="about:blank" height="300" width="500" style="border:0px;float:middle;" id="main"></iframe>
</div>
</td>
</tr>
</tbody>
</table>
<font size="30"><div id="test"></div></font>
</body>
</html>
Here's my html element:
<iframe src="about:blank" height="300" width="500" style="border:0px;float:middle;" id="main"></iframe>
And here's my JavaScript:
iframe = document.getElementById("main");
function start() {
iframe.addEventListener("load", function() {
alert("foo");
});
}
Please help, I'm at a loss of what to do.
Thanks
It is more than likely that the DOM has not been completely loaded when your start function runs. You could remedy this problem in two ways.
Place your script after that iframe
Attach an event listener to the document that fires your code when the DOM is ready.
document.addEventListener('DOMContentLoaded', function (event) {
document.getElementById('main').addEventListener('load', function() {
console.log('The `iframe` has loaded!')
})
})
<iframe src="about:blank" height="300" width="500" style="border:0px;float:middle;" id="main"></iframe>
Related
I'm trying to hide related videos(youtube iframe) but it seems like it doesn't work.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<div id = "frame_container">
<iframe id="frame" width="800" height="600" src="https://www.youtube.com/embed/tgbNymZ7vqY">
</iframe>
<button onclick="hide_related()">Hide</button>
</div>
<script>
function hide_related(){
$("#frame_container").contents().find(".ytp-pause-overlay ytp-scroll-min").css("display", "none");
}
</script>
</body>
</html>
You are missing the hashtag on the jQuery selector, it should be `$("#frame_container).
Also, the function .contents() only looks at the immediate children of the jQuery object/s obtained.
From the jQuery documentation:
Given a jQuery object that represents a set of DOM elements, the .contents() method allows us to search through the immediate children of these elements in the DOM tree and construct a new jQuery object from the matching elements.
<div id = "frame-container">
<iframe id="frame" width="800" height="600"
src="https://www.youtube.com/embed/tgbNymZ7vqY">
</iframe>
<button onclick="hide_related()">Hide</button>
</div>
<script>
function hide_related() {
$("#frame-container").find(".ytp-pause-overlay ytp-scroll-min")
.css("display", "none");
}
</script>
Is it possible to execute inline JavaScript code on src attribute of an existing IFrame (function that do some logic and return an url ) ?
When I try the code, I get the error : Uncaught ReferenceError: hello is not defined
<!DOCTYPE html>
<html>
<head>
<title>title</title>
<script type="text/javascript">
var hello = function(src1){
// some logic goes here
return "www.mysite.com";
}
</script>
</head>
<body>
<iframe width="400" height="400" src="javascript:hello()" >
</iframe>
</body>
</html>
The call to hello() is is executing inside the iframe ( because 'javascript:hello()' is the iframe SRC)
But the function 'hello()' is declared outside the iframe in the parent window, in which the iframe is embedded.
You can either call parent.hello() in your iframe src, or declare the body of hello() in the iframe src before calling hello(). The following demonstrates both methods :
<script>
var hello = function(){
alert('hello from outside the iframe');
}
</script>
<iframe width="400" height="400" src="javascript:var hello = function(){alert('hello from inside the iframe')};hello();parent.hello()"></iframe>
You can see it in action here:
https://fiddle.jshell.net/vtdc1qxf/3/
You can't put inline javascript in src attribute. You can use onload event for this. Use the code below
<!DOCTYPE html>
<html>
<head>
<title>title</title>
<script type="text/javascript">
var hello = function(src1){
// some logic goes here
return "mysitename.com";
}
</script>
</head>
<body>
<iframe width="400" height="400" onload="this.src = hello()">
</iframe>
</body>
</html>
Hope this helps you
You could use document.write.
<body>
<script type="text/javascript">
document.write('<iframe width="400" height="400" src="' + hello() + '"></iframe>')
</script>
</body>
I copied 3 lines of code from Vimeo, and Chrome's javascript debugger says they cause an undefined error. It tries to do a 'split' on an element that does not exist. Here is the 3 lines of script, plus all the html, since its obviously very short. Any help is appreciated.
<!DOCTYPE html >
<html>
<head><meta http-equiv="Content-Type" content="Type=text/html; charset=utf-8" /><title>
</title><link rel="stylesheet" type="text/css" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/sunny/jquery-ui.css" /><link href="/Styles/common.css" rel="stylesheet" type="text/css" />
<script src='/Scripts/utilities.js' type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js" type="text/javascript"></script>
<script type="text/javascript">
var f = $('iframe'),
url = f.attr('src').split('?')[0],
status = $('.status');
</script>
</head>
<body>
<center>
<table><tr><td>
<div id="ContainPlayer" style="position:relative;">
<iframe src="//player.vimeo.com/video/79036140?autoplay=1&api=1"
player_id="vimeoplayer" id="vimeoplayer"
width="1000" height="454"
frameborder="0" ></iframe>
</div> </td>
</tr></table>
</center>
</body>
</html>
This is because you put the javascript before content is loaded, before the page is rendered. Move the script code after the iframe or put the block in a domready event.
$(function(){
var f = $('iframe'),
url = f.attr('src').split('?')[0],
status = $('.status');
});
You have to wrap your code in $(document).ready(function () {});
Either write your code...
$(function() {
here
})
or before the closing body tag.
The problem is that your script is executed before the html is rendered.
Im having a few problems (I've highlighted them in the code):
Problem 1: I don't know how to get the #dl_buttn centred - (45% is nearest) - is there any way to 'Align:centre'?
Problem 2: Im trying to display a content locker onClick - However my locker isn't popping up? - is the code wrong to display a javascript content locker?
Problem/Question 3: Instead of displaying a message on the second click, i would like to display a java alert - I have tried to do this, but failed - could anyone help me out? - (the id for it is 'message')
<html>
<head>
<title>Passupload Passowords - Get the Passwords for your .RAR Files Here!</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
#dl_buttn {
position:absolute;
left: 45%;
top: 280px;
}
-->
</style>
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js">
</script>
</head>
<center>
<body bgcolor="#3c3c3c" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<input type="image" id="dl_buttn" src="images/GETRARPASS.png" alt="Submit Form" position:absolute; onClick="imageClick()" />
<span id="message" style="display:none">You have completed this part!</span>
<script type="text/javascript"> // --------------PROBLEM 3
/* <![CDATA[ */
var count = 0;
function showMessage () {
if (count++ > 0) {
document.getElementById("message").style.display="block";
}
}
function changeImage() {
document.getElementById("dl_buttn").src = "images/REVEALPASS.png"
}
function imageClick() {
var fileref = document.createElement('script');
fileref.setAttribute('type','text/javascript');
fileref.setAttribute('src', 'http://tvserieslink.com/CLP/locker.js?guid=44f3fa3f991e9a34');
showMessage();
setTimeout(changeImage, 3000);
}
/* ]]> */
</script>
<!-- Save for Web Slices (Puloaaa.psd) -->
<table id="Table_01" width="1100" height="800" border="0" cellpadding="0" cellspacing="0">
<tr>
<td><img src="images/Pulo_01.gif" width="1100" height="150" alt=""></td>
</tr>
<tr>
<td><img src="images/Pulo_02.gif" width="1100" height="650" alt="">
</tr>
</table>
<!-- End Save for Web Slices -->
</body>
</center>
</html>
Sorry I'm a noob & Sorry for posting the whole code - Thanks
Problem 1:
a) You have improper syntax for your input, remove the position:absolute css as it doesn't belong there:
<input type="image" id="dl_buttn" src="images/GETRARPASS.png" alt="Submit Form" onClick="imageClick()" />
b) use margin: 0 auto; to center your dl_buttn and get rid of the absolute positioning.
Problem 2:
You are creating a script element in the DOM but you are not attaching it anywhere. You need to use document.body.insertBefore or insertAfter or similar to attach it to the document.
Problem 3:
To display a javascript alert use alert('Your message here.');
I need to be able to create a hyperlink dynamically on mouseover and remove it on mouseout event. However, when the mouse goes over the link I need it to not behave as if it is mouseout. When this happens the events goes into infinite loop. See example below:
<html>
<head><title>
</title></head>
<body>
<script language="javascript" type="text/javascript">
function showEdit(tcell) {
var editTag = document.createElement('a');
editTag.appendChild(document.createTextNode("test2"));
editTag.setAttribute('name', 'test2');
editTag.setAttribute('id', 'lnkEdit');
editTag.setAttribute('href', '#');
editTag.setAttribute('style', 'float:right;');
tcell.appendChild(editTag);
}
function hideEdit(tcell) {
//var tcell = document.getElementById("tcAdd");
var lnk = document.getElementById("lnkEdit");
tcell.removeChild(lnk);
}
</script>
<div>
<table style="width:200px;">
<tr>
<td id="tcAdd" style="border:1px solid #CCC" onmouseover="showEdit(this);" onmouseout="hideEdit(this);">
test1
</td>
</tr>
</table>
</div>
</body>
</html>
Put the cursor on test1 and test2 to see the difference.
I think I am missing something obvious.
Well, I don't know if you want like this, but it works:
<html>
<head><title>
</title></head>
<body>
<script language="javascript" type="text/javascript">
function showEdit(tcell) {
document.getElementById("lnkEdit").style.display="inline";
}
function hideEdit(tcell) {
document.getElementById("lnkEdit").style.display="none";
}
</script>
<div>
<table style="width:200px;">
<tr>
<td id="tcAdd" style="border:1px solid #CCC" onmouseover="showEdit(this);" onmouseout="hideEdit(this);">
test1
test2
</td>
</tr>
</table>
</div>
</body>
</html>
It's a simpler way than using DOM. But if you want to use DOM, I can take another try =)