I have an iframe in a page and i want to get the current url for that iframe and update an input text with that url.
I found that i can get the url for the iframe using
document.getElementById("iframe_id").contentWindow.location.href
<iframe id="iframe" name="iframe" src="" width="100%" height="100%" style="border-width: 0px; border-color:#ffffff; border-style: solid;" scrolling="no" border="0" class="auto-style1" frameborder="0" marginheight="0" marginwidth="0"> </iframe>
<script type="text/javascript">
var link = document.getElementById("iframe").contentWindow.location.href ;
document.Show.link.value = link;
</script>
<strong>link for the iframe :</strong>
<input name="link" type="text" size="100" />
<a onclick="document.all.iframe.src=''" href="url" target="iframe">LINK</a>
that didnt work.
I dont know how to use it and update input text with that url every time the ifram's url changes
iframe url may change if some one clicks on link inside it
best regards,
Your iframe code is wrong. There it comes :
<iframe id="iframe" src="url_of_your_iframe" ... ></iframe>
<input type="text" id="input" />
<script type="text/javascript">
(function() {
document.getElementById('input').value = document.getElementById('iframe').src;
})();
</script>
That's it.
Edit : wait, your iframe's url changes when? how?
NOTE: You cannot access elements of an IFRAME (including contentWindow) if page within the IFRAME belongs to a different domain than the parent page due to Same Origin Policy (Quote from - Yuriy Galanter)
However here's a simple and basic browser that uses keyup to search; maybe it'll come in handy for you.
If you decide to add buttons to go forward and back in history you can use history.back();, and history.forward(); for that particular purpose.
<script type='text/javascript' src='http://code.jquery.com/jquery-1.9.1.min.js'></script>
<style type="text/css">
span.style {
cursor: pointer;
font-family: Sans-Serif;
font-size: 1.5em;
font-weight: bold;
padding: 0 .5em;
color: #666;
}
span.style:hover {
color: #999;
}
span.style:active {
color: #000;
}
input#goto {
width: 80%;
font-family: Sans-Serif;
font-size: 1.25em;
}
iframe#browsensearch {
width: 100%;
height: 90%;
}
</style>
<script type='text/javascript'>
$(document).ready(function() {
$("#goto").click(function() {
$(this).select();
});
$("#bing").click(function() {
var sitesgohere = document.getElementById("browsensearch");
sitesgohere.src = "http://www.bing.com/";
$("#goto").val("bing.com");
});
$("#goto").keyup(function(e) {
var val = $(this).val(),
sitesgohere = document.getElementById("browsensearch");
sitesgohere.src = "http://" + val;
});
});
</script>
<form name="sites" align="center">
<span id="bing" class="style">Bing</span>
<input id="goto" type="text" placeholder="http:// added by default" />
</form>
<iframe id="browsensearch" src="http://theextinctionprotocol.wordpress.com/2013/10/01/large-fireball-seen-acoss-six-midwestern-states/" width="100%" height="100%" allowtransparency="true" frameBorder="0">
Your browser does not support IFRAME's
</iframe>
Related
To start off I'm terrible at Js and super new at it. I'm trying to make a random image pop up when the site goes to a 404. I can't tell if my website is actually running the code or not because console.log wasn't working. Because of that I took all my CSS and js and put it all into the same HTML file to see if that was the problem (it wasn't) Any help is much appreciated :)
HTML:
<html>
<head>
<?php include $_SERVER["DOCUMENT_ROOT"]."/php/ballsdeep1headndnav.php"; ?>
<link rel="stylesheet" href="../main.css" />
<style>
.yikes {
background-color: black;
}
.white {
color: white;
}
.cute_block {
border: blue;
border: 10px;
margin: 50px;
}
label {
margin: 10px;
}
input {
margin: 10px;
color: black;
}
</style>
<title>Yikes.</title>
</head>
<body class="yikes">
<h1 class="center white">
<404>
</h1>
<div id="getMeme()"></div>
<p class="white cute_block center">We have no clue how you ended up here</p>
<form class="white cute_block center">
<label for="how">How did you get here</label>
<input type="text" id="how" name="how"><br><br>
<label for="else">Anything else?</label>
<input type="text" id="else" name="else"><br><br>
<input type="submit" value="Submit">
</form>
</body>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-p34f1UUtsS3wqzfto5wAAmdvj+osOnFyQFpp4Ua3gs/ZVWx6oOypYoCJhGGScy+8" crossorigin="anonymous"></script>
<script>
function getMeme() {
var meme = new Array('images/no_more-ico.png', 'images/nothing.png', 'images/phpfiles.png', 'images/sike.png');
var pp = Math.floor(Math.random() * meme.length);
document.getElementById("result").onload = '<img src="' + meme[pp] + '" />';
}
</script>
</html>
Using your code, you would need to ensure the function getMeme is called/invoked. Furthermore, you would need to update the function to modify the innerHTML of the element with id result instead of assigning to it's event handler onload.
See demo below:
I've included a console.log for debugging purposes on stackoverflow as images shared in the question are not available.
<head>
<?php include $_SERVER["DOCUMENT_ROOT"]."/php/ballsdeep1headndnav.php"; ?>
<link rel="stylesheet" href="../main.css" />
<style>
.yikes {
background-color: black;
}
.white {
color: white;
}
.cute_block {
border: blue;
border: 10px;
margin: 50px;
}
label {
margin: 10px;
}
input {
margin: 10px;
color: black;
}
</style>
<title>Yikes.</title>
</head>
<body class="yikes">
<h1 class="center white">
<404>
</h1>
<span id="result"></span>
<p class="white cute_block center">We have no clue how you ended up here</p>
<form class="white cute_block center">
<label for="how">How did you get here</label>
<input type="text" id="how" name="how"><br><br>
<label for="else">Anything else?</label>
<input type="text" id="else" name="else"><br><br>
<input type="submit" value="Submit">
</form>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-p34f1UUtsS3wqzfto5wAAmdvj+osOnFyQFpp4Ua3gs/ZVWx6oOypYoCJhGGScy+8" crossorigin="anonymous"></script>
<script>
function getMeme() {
var meme = new Array('images/no_more-ico.png', 'images/nothing.png', 'images/phpfiles.png', 'images/sike.png');
var pp = Math.floor(Math.random() * meme.length);
console.log("chose meme",meme[pp]); //line included for debugging purposes on stackoverflow as images shared in question are not available
//update `innerHTML` of target element
document.getElementById("result").innerHTML = '<img src="' + meme[pp] + '" />';
}
//call function to getMeme at the end of the page
getMeme();
</script>
</body>
</html>
Good afternoon,
I'm using two buttons on my site, each opens a different iframe.
The problem is that after clicking to open one, the other does not open simultaneously when clicking the other iframe button.
$(function() {
$('#load').click(function() {
if (!$('#iframe').length) {
$('#iframeHolder').html('<iframe id="iframe" scrolling="no" style="border:0px;" src="https://images.pexels.com/photos/414612/pexels-photo-414612.jpeg" width="100%" height="700px;"></iframe>');
}
});
});
$(function() {
$('#load2').click(function() {
if (!$('#iframe').length) {
$('#iframeHolder2').html('<iframe id="iframe" scrolling="no" style="border:0px;" src="https://assets.wordpress.envato-static.com/uploads/2017/08/tropical-PS53BSA.jpg" width="100%" height="300px;"></iframe>');
}
});
});
<center>
<a style="background-color: rgb(98,124,169,0.8); color: white; cursor: pointer;" class="hashtagsocial" id="load">PODCASTS</a>
<a style="background-color: rgb(98,124,169,0.8); color: white; cursor: pointer;" class="hashtagsocial" id="load2">SCHEDULE</a>
</center>
<br>
<br>
<br>
<div id="iframeHolder"></div>
<br>
<br>
<div id="iframeHolder2"></div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
Because that's exactly what if(!$('#iframe').length) is preventing in both of your buttons. When you append your new HTML to the page, it includes an element with id="iframe". So the next time you run that if statement, .length is greater than 0 so the check is false and the if block does not execute.
Without that if, you can open both:
$(function(){
$('#load').click(function(){
$('#iframeHolder').html('<iframe scrolling="no" style="border:0px;" src="https://images.pexels.com/photos/414612/pexels-photo-414612.jpeg" width="100%" height="700px;"></iframe>');
});
});
$(function(){
$('#load2').click(function(){
$('#iframeHolder2').html('<iframe scrolling="no" style="border:0px;" src="https://assets.wordpress.envato-static.com/uploads/2017/08/tropical-PS53BSA.jpg" width="100%" height="300px;"></iframe>');
});
});
<center><a style="background-color: rgb(98,124,169,0.8); color: white; cursor: pointer;" class="hashtagsocial" id="load">PODCASTS</a> <a style="background-color: rgb(98,124,169,0.8); color: white; cursor: pointer;" class="hashtagsocial" id="load2">SCHEDULE</a>
<br>
<br>
<br>
<div id="iframeHolder"></div>
<br>
<br>
<div id="iframeHolder2"></div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
Note: I also removed the id="iframe" from the appended HTML, since you don't want to append two elements with the same id to the page. If you need those elements to have IDs, they'll have to be unique.
If, on the other hand, you want to be able to switch between the two then you would want to put them in a single container rather than in their own containers:
$(function(){
$('#load').click(function(){
$('#iframeHolder').html('<iframe scrolling="no" style="border:0px;" src="https://images.pexels.com/photos/414612/pexels-photo-414612.jpeg" width="100%" height="700px;"></iframe>');
});
});
$(function(){
$('#load2').click(function(){
$('#iframeHolder').html('<iframe scrolling="no" style="border:0px;" src="https://assets.wordpress.envato-static.com/uploads/2017/08/tropical-PS53BSA.jpg" width="100%" height="300px;"></iframe>');
});
});
<center><a style="background-color: rgb(98,124,169,0.8); color: white; cursor: pointer;" class="hashtagsocial" id="load">PODCASTS</a> <a style="background-color: rgb(98,124,169,0.8); color: white; cursor: pointer;" class="hashtagsocial" id="load2">SCHEDULE</a>
<br>
<br>
<br>
<div id="iframeHolder"></div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
Note also that using 2 document.ready handlers is redundant. You don't need that much ceremony for each click handler, just create them both:
$(function(){
$('#load').click(function(){
$('#iframeHolder').html('<iframe scrolling="no" style="border:0px;" src="https://images.pexels.com/photos/414612/pexels-photo-414612.jpeg" width="100%" height="700px;"></iframe>');
});
$('#load2').click(function(){
$('#iframeHolder').html('<iframe scrolling="no" style="border:0px;" src="https://assets.wordpress.envato-static.com/uploads/2017/08/tropical-PS53BSA.jpg" width="100%" height="300px;"></iframe>');
});
});
I am trying to create a button from Chimp.net that when you click on it opens an iframe with a pop up window, but I have an error in the code and I can not recognize it.
Can anybody see the problem?
This is the page where I am getting the code:
http://blog.chimp.net/chimp-custom-widget/
Code:
<script type="text/javascript" src="https://chimp.net/widget/js/loader.js?NzYyNSxtaW5pLHRlYWwsUGluayBTaGlydCBEYXkgMjAxNixHcm91cA%3D%3D" id="chimp-button-script" data-hide-button="true" data-script-id="oriol"> </script>
<h1>Button</h1>
<div id="custom-chimp-button" width="200px" height="200px" style="background: red; cursor: pointer; padding: 10px; margin: 10px;"><strong>Button</strong><br> You can click on this div! It'll open the form.</div>
<script type="text/javascript">
$(document).ready(function() {
$("#custom-chimp-button").on("click", function() {
var frame = document.getElementById("chimp-form-oriol");
var content = frame.contentWindow; content.postMessage("open-chimp-frame", "*");
frame.style.opacity = 1;
frame.style.display = "block";
});
});
</script>
You are missing the jquery.min.js reference on your page I guess. Please add it and see what you get.
Here on SO; iframe are not allowed so it won't show up in this code snippet.
$(document).ready(function() { $("#custom-chimp-button").on("click", function() { var frame = document.getElementById("chimp-form-oriol"); var content = frame.contentWindow; content.postMessage("open-chimp-frame", "*"); frame.style.opacity = 1; frame.style.display = "block"; }); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="https://chimp.net/widget/js/loader.js?NzYyNSxtaW5pLHRlYWwsUGluayBTaGlydCBEYXkgMjAxNixHcm91cA%3D%3D" id="chimp-button-script" data-hide-button="true" data-script-id="oriol"> </script>
<h1>Button</h1>
<div id="custom-chimp-button" width="200px" height="200px" style="background: red; cursor: pointer; padding: 10px; margin: 10px;"> <strong>Button</strong><br> You can click on this div! It'll open the form.</div>
I am trying to switch iframes in html which contains video references. Kindly help me with this. Actually i want to check the value i pass through textarea and then according to that value i want to switch frames.
HTML
<iframe id="i1" name="iframeswitch" src="nice-to-meet-you.html" style="float: left;
position:relative;
height:350px;
width:500px;
margin-left:-25px;"
scrolling="no" frameborder="0">
<p>Your browser does not support iframes.</p>
</iframe>
<iframe id="i3" name="iframeswitch" src="your-name.html" style="float: left;
position:relative;
height:350px;
width:500px;
margin-left:-25px;"
scrolling="no" frameborder="0">
<p>Your browser does not support iframes.</p>
</iframe>
<iframe id="i2" name="iframeswitch" src="deaf-you.html" style="float: left;
position:relative;
height:350px;
width:500px;
margin-left:-25px;"
scrolling="no" frameborder="0">
<p>Your browser does not support iframes.</p>
</iframe>
<iframe id="i4" name="iframeswitch" src="you-work-where.html" style="float: left;
position:relative;
height:350px;
width:500px;
margin-left:-25px;"
scrolling="no" frameborder="0">
<p>Your browser does not support iframes.</p>
</iframe>
i made these iframes display:none; in my css. and i want them to be displayed in a div named virtual.
javascript
<script>
function myFunction() {
var text=document.getElementById('me').value;
if(text="nice to meet you")
{
document.getElementById('i1').style.display="block";
}
else if(text="are you deaf")
{
document.getElementById('i2').style.display="block";
}
else if(text="what is your name")
{
document.getElementById('i3').style.display="block";
}
else if(text="where you work")
{
document.getElementById('i4').style.display="block";
}
else
{}
}
</script>
Your code is a great example why not to use inline CSS, imagine one day you find out your iframe should be width:600px; instead of 500 ...harsh time.
You don't need 4+ iframes, but only one.
<input id=me type=text>
<iframe id=myIframe scrolling=no frameborder=0>Get a Browser</iframe>
CSS:
#myIframe {
float : left;
position : relative;
height : 350px;
width : 500px;
margin-left : -25px;
}
Now, having only one iframe you can build an Object with your associations:
var text2src = {
"nice to..." : "nice.html",
"want some" : "want.html",
"good night" : "night.html"
};
and on input change you can than modify the iframe src:
var me = document.getElementById("me");
var ifr = document.getElementById("myIframe");
me.oninput = function(){
var val = this.value.toLowerCase();
if(text2src.hasOwnProperty(val)) ifr.src = text2src[val];
};
So I have been able to make some progress with my problem but have encountered something a little unexpected/confusing. I have been able to add my script to my web page, however, the two do not work together. Without the script, the page appears as I would like. With the script, the script runs and overrides the web page. What happens is a random picture shows up in the top left corner of the screen, but nothing from the html file appears. I have included all my code (html, javascript, css) and if anyone can provide some guidance it would be really greatly appreciated.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link href="mplstyles.css" rel="stylesheet" type="text/css" />
<title>Monroe Public Library</title>
</head>
<body>
<div id="pageContent">
<div id="head">
<img src="mpl.jpg" alt="Monroe Public Library" />
</div>
<div id="links">
<ul class = "nav">
<span>Quick Links</span>
<li>Home Page</li>
<li>Online Catalog</li>
<li>Friends of MPL</li>
<li>New Books and Other Good Reading</li>
<li>Ohio Virtual Library</li>
<li>Internet Public Library</li>
<li>Services and Collection</li>
<li>Adult Programs</li>
<li>Teen Central</li>
<li>Children's Room</li>
<li>Computers at MPL</li>
<li>Computer Rules and Procedures</li>
<li>Staff Directory</li>
<li>Library Records</li>
</ul>
</div>
<div id="main">
<h2>Library Records</h2>
<p>To view the library records, enter your username and password.</p>
<form id="login" method="post" action="">
<p>
<label for="username" class="center" id="input"> Username:</label>
<input type="text" id="username" name="username" size="20" />
</p>
<p>
<label for="password" class="center" id="input"> Password:</label>
<input type="password" id="password" name="password" size="20" />
</p>
<p>
<label for="captcha" id="input">As a final security check, enter the 5 numbers you see displayed below.</label>
<input type="text" id="captcha" name="captcha" size="6" />
</p>
<p id="login"> </p>
<p id="login">
</p>
<script src="mpl.js"></script>
<p align="center"><img src="" alt="" name="number1" width="70" height="100" id="number1"><img src="" alt="" name="number2" width="70" height="100" id="number2"><img src="" alt="" name="number3" width="70" height="100" id="number3"><img src="" alt="" name="number4" width="70" height="100" id="number4"><img src="" alt="" name="number5" width="70" height="100" id="number5"></p>
<div id="images">
</div>
<p align="center">
<input type="submit" value="View Library Records" />
</p>
</form>
</div>
<div id="address">
<span class="addressBold">Monroe Public Library</span>
580 Main Street, Monroe, OH 45050
<span class="addressBold">Phone</span>(513) 555-0211
<span class="addressBold">Fax</span>(513) 555-0241
</div>
</div>
</body>
</html>
window.onload = function ()
{
//http://www.java-scripts.net/javascripts/Random-Image-Script.phtml
var pictureNumbers=new Array()
//specify random images below. You can have as many as you wish
pictureNumbers[1]="0.jpg"
pictureNumbers[2]="1.jpg"
pictureNumbers[3]="2.jpg"
pictureNumbers[4]="3.jpg"
pictureNumbers[5]="4.jpg"
pictureNumbers[6]="5.jpg"
pictureNumbers[7]="6.jpg"
pictureNumbers[8]="7.jpg"
pictureNumbers[9]="8.jpg"
pictureNumbers[10]="9.jpg"
var randomNumber = Math.floor(Math.random()*pictureNumbers.length)
if (randomNumber==0)
{
randomNumber=1
document.write('<img src="'+pictureNumbers[randomNumber]+'" border=0>')
}
else if (randomNumber==1)
{
document.write('<img src="'+pictureNumbers[randomNumber]+'" border=0>')
}
else if (randomNumber==2)
{
document.write('<img src="'+pictureNumbers[randomNumber]+'" border=0>')
}
else if (randomNumber==3)
{
document.write('<img src="'+pictureNumbers[randomNumber]+'" border=0>')
}
else if (randomNumber==4)
{
document.write('<img src="'+pictureNumbers[randomNumber]+'" border=0>')
}
else if (randomNumber==5)
{
document.write('<img src="'+pictureNumbers[randomNumber]+'" border=0>')
}
else if (randomNumber==6)
{
document.write('<img src="'+pictureNumbers[randomNumber]+'" border=0>')
}
else if (randomNumber==7)
{
document.write('<img src="'+pictureNumbers[randomNumber]+'" border=0>')
}
else if (randomNumber==8)
{
document.write('<img src="'+pictureNumbers[randomNumber]+'" border=0>')
}
else if (randomNumber==9)
{
document.write('<img src="'+pictureNumbers[randomNumber]+'" border=0>')
}
else if (randomNumber==10)
{
document.write('<img src="'+pictureNumbers[randomNumber]+'" border=0>')
}
}
#charset "UTF-8";
/* CSS Document */
body
{
margin-top:0;
font-family:Georgia, "Times New Roman", Times, serif;
background-color:#FFC;
}
#head
{
background-color:orange;
}
#page
{
width: auto;
margin" 0 auto;
background-color: white;
border-top: none;
}
#links
{
position:absolute;
width:10em;
border: 1px solid blue;
top: 72px;
background-color: white;
}
#main
{
margin-left: 12em;
}
#login
{
padding-top: 1em;
padding-left: 2em;
padding-bottom: 5em;
border: 1px solid blue;
}
#address
{
padding-top: 2em;
padding-left: 2em;
border-top: 1px solid blue;
}
#pageContent #main h2 {
color: #00F;
}
#input
{
background-color: orange;
padding-right: 20%;
}
Your problem is document.write. You should either be creating an element and appending it to a parent element in the DOM, or changing the src attribute of an existing element.
Creating Elements and appending them
var parent = document.getElementById("parent"),
img = document.createElement("img")
img.setAttribute("src","your-file-name.jpg")
parent.appendChild(img)
Example
Here is a simplified example of what you are doing.
Fiddle: http://jsfiddle.net/L3WYH/1/
HTML
<div id="picture-frame"></div>
JS
var pictureNumbers = [],
pictureCount = 10
for ( var i = 1; i <= pictureCount; i++ )
pictureNumbers[i] = i + ".jpg"
var randomNumber = Math.ceil(Math.random()*(pictureNumbers.length - 1)),
element = document.getElementById("picture-frame"),
image = document.createElement("img")
image.setAttribute("src", pictureNumbers[randomNumber])
element.appendChild(image)
To expand on #Gary's comment to the original post:
The calls to document.write(...) are what's causing your problem. Upon firing the 'onload' event, the browser closes the document for writing. Any subsequent calls to document.write will literally overwrite the whole page.
To fix this, you will need to do one of two things:
Make your calls to document.write outside of the window.onload event
Do as #MBottens mentioned in his answer, where you append new <img> elements to a DIV tag.