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','*');
Related
In addition to this topic execute a javascript after page load is complete I noticed the solution didn't work for loading a map. I do have a similar use case. However, if I follow the script the script needed doesn't load.
I want to load a map after the loading of the page is finished, however I do see the script in the page source, but no script is executed.
The source is:
var mst_width = "96%";
var mst_height = "350vh";
var mst_border = "0";
var mst_map_style = "simple";
var mst_mmsi = "244770624";
var mst_show_track = "true";
var mst_show_info = "true";
var mst_fleet = "";
var mst_lat = "";
var mst_lng = "";
var mst_zoom = "";
var mst_show_names = "0";
var mst_scroll_wheel = "true";
var mst_show_menu = "true";
window.onload = function () {
var element = document.createElement("script");
element.src = "http://www.myshiptracking.com/js/widgetApi.js";
document.getElementsByTagName("head")[0].appendChild(element);
}
In the page source I see:
var mst_width = "96%";
var mst_height = "350vh";
var mst_border = "0";
var mst_map_style = "simple";
var mst_mmsi = "244770624";
var mst_show_track = "true";
var mst_show_info = "true";
var mst_fleet = "";
var mst_lat = "";
var mst_lng = "";
var mst_zoom = "";
var mst_show_names = "0";
var mst_scroll_wheel = "true";
var mst_show_menu = "true";
window.onload = function () {
var element = document.createElement("script");
element.src = "http://www.myshiptracking.com/js/widgetApi.js";
document.getElementsByTagName("head")[0].appendChild(element);
}
Can someone please point me in the direction on how to get the script executed? I also assumed that the script should be appended to the 'body' instead of the 'head'm but I'm not sure about it.
Thanks!
Edit based change of head to body:
<script>
var mst_width="96%";var mst_height="350vh";var mst_border="0";var mst_map_style="simple";var mst_mmsi="244770624";var mst_show_track="true";var mst_show_info="true";var mst_fleet="";var mst_lat="";var mst_lng="";var mst_zoom="";var mst_show_names="0";var mst_scroll_wheel="true";var mst_show_menu="true";
window.onload = function() {
var element = document.createElement("script");
element.src = "http://www.myshiptracking.com/js/widgetApi.js";
document.getElementsByTagName("body")[0].appendChild(element );
}
</script>
So, finally I managed to solve the problem and got the desired map in my browser... using the following HTML+JS code (which you can run with the button below):
<html lang="en-US" prefix="og: http://ogp.me/ns#">
<head>
<script>
var mst_width="100%";var mst_height="450px";var mst_border="0";var mst_map_style="terrain";var mst_mmsi="";var mst_show_track="";var mst_show_info="";var mst_fleet="";var mst_lat="";var mst_lng="";var mst_zoom="";var mst_show_names="0";var mst_scroll_wheel="true";var mst_show_menu="true";
function loadMap() {
var element = document.createElement("script");
element.setAttribute("id", "myshiptrackingscript");
element.setAttribute("async", "");
element.setAttribute("defer", "");
element.src = "http://www.myshiptracking.com/js/widgetApi.js";
document.getElementById("mapContent").appendChild(element );
}
window.onload = loadMap
console.log('Registered onload')
</script>
</head><body>
<div id="mapContent" />
</body></html>
Two points of attention:
you should add the created script tag as child of a tag belonging to the body ot the page (I used <div id="mapContent"/> and getElementById to access it)
you should load the HTML page through a http:// URL, not through a a file:// one: with the latter you get an error with message like "Browser does not support embedded objects"
I hope this can help you to solve the problem in you real case!
There are many ways to invoke your function when the page has loaded.
My vanilla's js tool of choice most of the time is:
window.addEventListener('DOMContentLoaded', function(){
//your bindings and functions
}
That way of proceeding is preferred to your onload method as otherwise, you won't be able to attach multiple events when the DOM loads completely.
Try this:
window.onload=function(){
document.write('<script src="http://www.myshiptracking.com/js/widgetApi.js>
</script>');
}
wrap your javascript code with this:
if(document.readyState === 'complete') {
// good to go! Put your code here.}
I have a React.js app and it displays inside a html iframe. How would I pass the URL params queries inside so my React app can access them. I tried to research online but couldn't find a solution for React. See code below and the solutions I tried. I get error message like TypeError: iframe is null. etc..
URL
http://website.com?param1=myname¶m1=lastname
HTML iFrame
<iframe id="myIframe" src="http://localhost:3000/myReactApp" frameborder="0">
React.JS => index.js
My first try
var loc = window.location.toString(),
params = loc.split('?')[1],
iframe = document.getElementById('myIframe');
iframe.src = iframe.src + '?' + params;
console.log(iframe.src);
My second try in React.JS app
(function() {
var frameBaseSRC = document.getElementById("myIframe").src;
var frameQueryString = document.location.href.split("iFrameQuery=")[1];
if (frameQueryString != undefined) {
document.getElementById("myIframe").src = frameBaseSRC + "?q=" + frameQueryString;
}
})();
I got it working! Using code below.
I got the code from here
How to pass parameters through iframe from parent html?
let getParamValue = function(paramName)
{
var url = window.location.search.substring(1); //get rid of "?" in querystring
var qArray = url.split('&'); //get key-value pairs
for (var i = 0; i < qArray.length; i++)
{
var pArr = qArray[i].split('='); //split key and value
if (pArr[0] === paramName)
console.log(pArr[1]);
return pArr[1]; //return value
}
}
getParamValue('param1');
In this example the iframe and parent document are in separate domains so the URL would not be accessible.
If they iframe and parent document are hosted in same URL you should be able to do window.parent.location
window.location.ancestorOrigins
does gives the ancestors of the component. If a react component or page is inserted in an iframe where the webpage host(page in iframe) and the browser link(main host), this returns a lists of hostnames by which the iframe page is being rendered.
I'm new to HTML and Javascript. I'm trying to write a Javascript function to print the content of an (hidden) iframe in order to print documents (to the user, seemingly) without opening them.
I based the function on the example I found here: https://developer.mozilla.org/en-US/docs/Printing#Print_an_external_page_without_opening_it
Printing the content works fine but the trouble is removing the iframe from the document after the printing has finished. This is what my code looks like now.
function closePrint () {
var element = document.getElementById("printFrame");
element.parentNode.removeChild(element);
}
function setPrint () {
this.contentWindow.__container__ = this;
this.contentWindow.onbeforeunload = setTimeout(closePrint, 100);
this.contentWindow.onafterprint = setTimeout(closePrint, 100);
this.contentWindow.focus(); // Required for IE
this.contentWindow.print();
}
function printPage (sURL) {
var oHiddFrame = document.createElement("iframe");
oHiddFrame.onload = setPrint;
oHiddFrame.width = 0;
oHiddFrame.height = 0;
oHiddFrame.style.position = "fixed";
oHiddFrame.style.right = "0";
oHiddFrame.style.bottom = "0";
oHiddFrame.id = "printFrame";
oHiddFrame.src = sURL;
document.body.appendChild(oHiddFrame);
}
I changed two lines in the example from
this.contentWindow.onbeforeunload = closePrint;
this.contentWindow.onafterprint = closePrint;
to
this.contentWindow.onbeforeunload = setTimeout(closePrint, 100);
this.contentWindow.onafterprint = setTimeout(closePrint, 100);
As it didn't remove the iframes without the timeout.
This works fine in both IE11 and Chrome, but in IE compitability mode (which I think emulates IE7) it gives me an error "Not implemented" when I try to use setTimeout.
So my question is, is there another way to run the closePrint function after a timeout or some other way to remove the iframe from the document when I've printed the content? Any help is appreciated.
after printing, leave the iframe on document.body. When you need to add your next iframe, first run a check for its presence ~ if its present, remove it then (first two lines).
myfunction() {
const iframe = document.querySelector('iframe');
if (iframe) iframe.parentNode.removeChild(iframe);
const i = document.createElement('iframe');
i.style.display = 'none';
i.src = this.study.DocumentUrl;
document.body.appendChild(i);
document.querySelector('iframe').contentWindow.focus();
document.querySelector('iframe').contentWindow.print();
}
I created a simple bookmarklet to append 3 invisible iframe's to the current document looking like this:
javascript: (function() {
var link = window.location.href;
var desktop = link.replace(".com", ".com/purge");;
var mobile = link.replace(".com", ".com/mpurge");
var tablet = link.replace(".com", ".com/tpurge");
var platforms = [desktop,tablet,mobile];
for (i = 0;i<platforms.length; i++){
ifrm = document.createElement("IFRAME");
ifrm.setAttribute("src", platforms[i]);
ifrm.style.width = 0+"px";
ifrm.style.height = 0+"px";
document.body.appendChild(ifrm);
if(i==platforms.length-1){
ifrm.onload = function(){
location.reload();
}
}
}
})();
what i want to do its to refresh the page im at after the third iframe is loaded but for some reason i cant get this one to work, any idea why?
thx!
i will never be == platforms.length inside of loop, because your loop condition is i<platforms.length.
Make it i == platforms.length - 1 or take reloading outside of the loop
I already can get the content of an Iframe with jQuery, though I would like to learn how to get it with pure JavaScript.
This is what I have so far.
var frame = document.getElementById('awc_frame');
var easyBB = frame.contentWindow.document.body.innerHTML;
easyBB.getElementById('chatbox-title').innerText="Chatbox";
What am I doing wrong, please help. Also originally the frame does not have an ID, and I already tried this
var frame = document.frames['awc_frame'];
Is that cross browser efficient? And then how do I get the contentWindow? Just some explanation so I can do this with JavaScript and not jQuery. jQuery version is this
var frame = $('#avacweb_chat iframe');
var easyBB = $('#chatbox-title',frame.contents()).text('Chatbox');
If it is on the same domain, try this. It won't let you access iframe contents if the iframe is of a different origin than the window that you are viewing.
var iframe = document.getElementById("awc_frame");
var iframe_contents = iframe.contentDocument.body.innerHTML;
Working example with jsfiddle iframe viewing a page on the same domain:
http://jsfiddle.net/tqAL3/1/
The same answer as Nile but as a function more similar to the querySelector
// iframe-query-selectors.js v1
function iframeQuerySelector(iframe, selector, all){
if( iframe && (iframe.nodeName || iframe.tagName) === 'IFRAME' && iframe.nodeType === 1){
all = all ? 'All' : '';
if(selector){
return iframe.contentDocument['querySelector' + all](selector);
};
return iframe.contentDocument;
};
throw new Error('The element must be an iframe.');
};
function iframeQuerySelectorAll(iframe, selector){
return iframeQuerySelector(iframe, selector, true);
};