Random websites not display on iframe - javascript

This code is generating a random link from variable but that link is not opening in iframe I need to display random links in iframe whenever the button is clicked. How to do that?
<html>
<script>
var cat1 = [
"http://arborjs.org",
"http://cartodb.com",
"http://vis4.net/labs/185"
];
var myFrame = document.getElementById("frame");
getRandomUrl(myFrame);
function getRandomUrl(myFrame) {
var index = Math.floor(Math.random()*cat1.length);
var url = cat1[index];
document.getElementById('frame').src = url;
}
btn.addEventListener("click", function() {
getRandomUrl(myFrame);
});
</script>
<body>
<button id="btn">Click</button>
<br>
<iframe id="frame" src="" style="width:500px; height: 500px"></iframe>
</body>
</html>

You have to put the script tag after all your HTML or wait for the window to load.
Also, you're calling a function before it's defined.
This code is generating a random link from variable
I don't think this is happening, if you open your console it should tell you the function and iframe are both undefined, as I stated above.

Related

How can I embed an iframe correctly with JavaScript?

How can I embed an iframe using JavaScript, that's being displayed where the code's being added? The code below displays the iframe ONLY above the footer, no matter where I add the code, whether it's in the header or the body.
var iframe_tag = document.createElement("iframe");
iframe_tag.setAttribute("src", "https://wikipedia.com");
iframe_tag.style.width = "100%";
iframe_tag.style.height = "480px";
document.body.appendChild(iframe_tag);
I know there are simpler ways to show an iframe, but I can only use JavaScript.
When you use document.body.appendChild it is identical to just writing in the new html at the bottom, or literly appending the element to the bottom
This means that regardless of where the script is, it will always do this
instead you should append to a predefined div (<div id="iframecontainer"> </div>)
let container = document.getElementById("iframecontainer");
container.appendChild(iframe_tag);
minimal example:
<!DOCTYPE html>
<html>
<body>
<script>
let iframe = document.createElement("iframe");
iframe.src = "https://wikipedia.com/";
window.onload = () => {
document.body.appendChild(iframe);
}
</script>
</body>
</html
In my opinion you should, instead of creating an appending an element, just set the src of a pre-existing iframe (<iframe id="iframe"> </iframe>)
let iframe_tag = document.getElementById("iframe");
iframe.src = "https://wikipedia.com";
minimal example:
<!DOCTYPE html>
<html>
<body>
<iframe id="iframe"> </iframe>
<script>
let iframe;
window.onload = () => {
iframe = document.getElementById("iframe");
iframe.src = "https://www.wikipedia.com/";
}
</script>
</body>
</html

add css to iframe javascript form list of iframes

I am trying to manipulate an iframe (chatbox) when loaded on a webpage.
The chatbox loads four iframes with changing id with each pageload.
Because the iframe that needs to be manipulated is the last / 4th of the list, i used get elements by tagname ("iframe").
However, no style is added to the last iframe:
<script>
window.onload = function() {
let myiFrame = document.getElementsByTagName("iframe");
let doc = myiFrame[3].contentDocument;
doc.body.innerHTML = doc.body.innerHTML + "<style>iframe{dispay:block !important}</style>";
}</script>
use
myiFrame[3].style.cssText = "display:block !important"
your code will become
<script>
window.onload = function() {
let myiFrame = document.getElementsByTagName("iframe");
myiFrame[3].style.cssText = "display:block !important";
}
</script>
Sample working code:
<!DOCTYPE html>
<html>
<body>
<p id="myP1" style="display: none!important">This is some text.</p>
<input type="button" onclick="demoDisplay()" value="Show">
<script>
function demoDisplay() {
document.getElementById("myP1").style.cssText = "display:block !important";
}
</script>
</body>
</html>

Random URL for Iframe on page load

i'm trying to load random iframe on my website
i got a script
var cat1 = [
"http://arborjs.org",
"http://cartodb.com",
"http://vis4.net/labs/185"
];
var myFrame = document.getElementById("frame");
function getRandomUrl(myFrame) {
var index = Math.floor(Math.random()*cat1.length);
var url = cat1[index];
myFrame.src = url;
}
btn.addEventListener("click", function() {
getRandomUrl(myFrame);
});
<button id="btn">Click</button>
<br>
<iframe id="frame" src="" style="width:200px; height: 200px"></iframe>
It works fine when i click the button,
but i also want to load random iframe when the page finishes to load.
Can anyone edit this code for me ?
thank you
widnow.onload is your friend in this case:
window.onload = function(){
getRandomUrl(myFrame);
};

iframe next page button for src (non array, actual src change)

I want to be able to change the source of an iframe but not the ways that I have found.
I want the iframe to start as http://www.example.com/1 then with the click of a Next button have the source change to http://www.example.com/2 but only the number needs to change.
So far I've found this:
<script type="text/javascript">
var clicks = 0;
function onClick() {
clicks += 1;
document.getElementById("clicks").innerHTML = clicks;
};
Which is great for keeping track of clicks on a page but I want to append the iframe src with the next number and have it load, sequentially.
Any ideas?
Tested and works:
<script>
var c=1;
var url="http://www.google.com/";
function f(){
document.getElementById("clicks").src = url+c;
c++;
}
</script>
<iframe src="http://www.google.com/1" id="clicks" >
</iframe>
<input type=button onclick="f()">

Get iframe url variable from inside the iframe

I want to use jquery/javascript if possible and grab a url variable frim inside the iframe
my iframe link looks like the below - the source changes dynamically
<iframe class="box" src="lightbox.html?img=images/lightbox/blue-shoes.jpg" scrolling="no" frameborder="0"></iframe>
Then, from inside the lightbox.html iframe - I want to grab the img (images/lightbox/blue-shoes.jpg) variable and change the source of an image
problem is - I cant figure out how to grab the iframe source url variable from inside the iframe
I am trying to avoid using php
I have used this for something similiar but cant get it to work
function getUrlVars() {
var vars = {};
var parts = document.referrer.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) {
vars[key] = value;
});
return vars;
}
var first = getUrlVars()["ref"];
If you control the script inside the iframe, here is an example that uses document.location.herf instead of referrer. lightbox.html:
<html>
<head>
<script>
function getUrlVars() {
var vars = {};
var parts = document.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) {
vars[key] = value;
});
return vars;
}
var first = getUrlVars()["img"];
alert(first);
var test = function(){
first = 'images/red.jpg'
alert(first);
}
</script>
</head>
<body>
<div>Inside</div>
<button onclick="test()">change url</button>
</body>
</html>
To do this using JQuery try this.
The image on your page lightbox.html, give it ad id e.g.
<img id="ImageID" src="whatever" />
Then use this JQuery to change the src attribute
$('#ImageID').attr('src', 'whatever');
UPDATE
in fact this probably won't work due to it being an IFrame I believe you won't be allowed to do this due to the same origin policy

Categories