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);
};
Related
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>
How to identify document content which is created under dynamic iframe
code structure
<div id="test" data-parent-url="/test.html" data-iframe-src="/test-header.html" class="sample-header">
// dynamically created iframe element
<iframe style="border-style: none; width: 100%; height: 105px; display: block;" scrolling="no" id="V1__header" src="/test-header.html">
// dynamically loaded document content
</iframe>
</div>
tried:
var ifrme = document.getElementById('V1__header');
var iframeContent = ifrme.contentWindow.document;
var iframeObj = $(iframeContent);
var contentheight = $(iframeObj.find(selector)[0]).height();
ifrme returns null intermittently, Couldnot find the id. Is there any alternative to find the id and the document content which is creted dynamically in code.
if you cant be sure the iframe is loaded, you could wait by testing at time interval:
var timer = setInterval(function(){
if($('#V1__header').length !=0){
clearIntervall(timer);
Identifydoc();
}
},400);
function idnetifyDoc(){
var ifrme = document.getElementById('V1__header');
var iframeContent = ifrme.contentWindow.document;
var iframeObj = $(iframeContent);
var contentheight = $(iframeObj.find(selector)[0]).height();
}
You can use onload callback:
const ifrme = document.getElementById('V1__header');
ifrme.onload = iframeLoaded;
function iframeLoaded() {
//--> logic
}
Add the script inside the body tag.
I have the following code to replace the src of the iframe to have a random video each time the page is loaded. However the page just keeps loading and keeps running the function. How do I stop the function for repeating.
<div id="rightsugg"><iframe id="randomVideo" width="560" height="315" src="" onLoad="displayRandomVideo();" frameborder="0" allowfullscreen></iframe></div>
<script type="text/javascript">
function getRandomVideo() {
var videos = [
'https://www.youtube.com/embed/kiTO7c_qeZs',
'https://www.youtube.com/embed/z4Hfv00eqoI',
'https://www.youtube.com/embed/7cdZYQB5ONE',
'https://www.youtube.com/embed/i1gE3nyQnKg',
];
var video = videos[Math.floor(Math.random()*videos.length)];
return video;
}
function displayRandomVideo() {
var htmlVideo = document.getElementById("randomVideo");
htmlVideo.src = getRandomVideo();
}
displayRandomVideo();
</script>
Just unregister the onLoad event after the videa has been displayed.
function displayRandomVideo() {
var htmlVideo = document.getElementById("randomVideo");
htmlVideo.src = getRandomVideo();
htmlVideo.onload=null;
}
jsfiddle
Why are you using onload event of the iframe in the first place?
$(window).load(displayRandomVideo);
would do it, and just remove the onload attribute in the <iframe> tag.
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.
Basically, im making a javascript to refresh a page and it will find the price and buy the item when it goes up for the price desired.
I got it to work without the iframe, but I need to to work in the iframe, which is the problem ive reached.
If you went to this page: [ http://m.roblox.com/items/100933289/privatesales ]
and ran this code:
alert(document.getElementsByClassName('currency-robux')[0].innerHTML);
You would get an alert for the lowest price. In the code, this doesnt work (Hence, my problem.)
Try running the code below on this page to get it to work [ http://www.roblox.com/Junk-Bot-item?id=100933289 ]
var filePath = document.URL;
var itemid = filePath.slice(((filePath.search("="))+1));
var mobileRoot = 'http://m.roblox.com/items/';
var mobileEnd = '/privatesales';
var mobileFilePath = mobileRoot+itemid+mobileEnd;
var iframe2 = '<iframe id="frame" width="100%" height="1" scrolling="yes"></iframe>';
document.write(iframe2);
var iframe = parent.document.getElementById("frame");
iframe.height = 300;
iframe.width = 500;
iframe.src = mobileFilePath;
var price;
var snipe = false;
var lp = Number(prompt("Snipe Price?"));
document.title = "Sniping";
function takeOutCommas(s){
var str = s;
while ((str.indexOf(",")) !== -1){
str = str.replace(",","");
}
return str;
}
function load() {
if (snipe == false) {
tgs = iframe.contentDocument.getElementsByClassName('currency-robux');
price = Number((takeOutCommas(tgs[0].innerHTML)));
alert(price);
}
}
iframe.onload = load;
You might try having both pages — the one from "m.roblox.com" and the one from "www.roblox.com" — add the following up at the top of the head:
<script>
document.domain = "roblox.com";
</script>
Code from the different domains won't be allowed to look at each others page contents, but if you set the domains to the same suffix then it should work.
If you can't get it to work by sharing the same document.domain="roblox.com" code then you can try posting messages to the iframe.
Put this inside the iframe page:
window.addEventListener('message',function(e) {
});
In the parent page execute this to pass a message (can be a string or object, anything really) to the iframe:
document.getElementById("frame").contentWindow.postMessage({ "json_example": true }, "*");
Put this in the parent to listen for the message:
window.addEventListener("message", messageReceived, false);
function messageReceived(e) {
}
From inside the iframe posting a message back out:
window.parent.postMessage('Hello Parent Page','*');