Javascript; Calling src within the script? - javascript

I'm making a simple affiliate ad rotation JavaScript. I'm still new to JavaScript and don't fully understand it so bear with me.
Google's adsense is split into 2 parts, one to set the variables, and the next to get the script. Then Amazon has an iframe to get it's ad's. All I want to do is use a random number from 1 to 2 (will be larger later) that will randomly select one of them to display on my localhost.
<script type="text/javascript"><!--
/* Custom footer */
select = rand(2);
if(select == 1){
google_ad_client = "-----------";
google_ad_slot = "---------";
google_ad_width = ---;
google_ad_height = --;
//get this google
<script ...src="http://pagead2.googlesyndication.com/pagead/show_ads.js
} else {
<iframe src="http://rcm.amazon.com/e/cm?t=------&o=1&p=48&l=ur1&category=amazonhomepage&f=ifr" width="728" height="90" scrolling="no" border="0" marginwidth="0" style="border:none;" frameborder="0"></iframe>
}
</script>

You need to use document.write("<html>or text</html") to write html out to the page, though for the iframe i would suggest putting it inside another div
<script type="text/javascript"><!--
/* Custom footer */
var select = Math.floor(Math.random()*2);
if(select == 1){
google_ad_client = "-----------";
google_ad_slot = "---------";
google_ad_width = ---;
google_ad_height = --;
//get this google
document.write("<script ...src='http://pagead2.googlesyndication.com/pagead/show_ads.js' />");
} else {
document.getElementById('adContainer').innerHTML('<iframe src="http://rcm.amazon.com/e/cm?t=------&o=1&p=48&l=ur1&category=amazonhomepage&f=ifr" width="728" height="90" scrolling="no" border="0" marginwidth="0" style="border:none;" frameborder="0"></iframe>');
}
</script>

You need to use document.write("stringtowritetodocument"); in order to get JavaScript to write anything to the document.
So, inside your if:
document.write('<script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>');
Also, once this grows in complexity, you may need to look out for this:
JavaScript's document.write Inline Script Execution Order
What you want may also be accomplished better with some server-side code, if that is available to you.

Have you tried Document.Write()?
e.g. Document.Write("<p>Your HTML Here</p");

Related

Slow Scroll external website to digital display using a Chromecast

Long story short, I'm casting a page I built (I'm self taught so please don't be too critical) to a Chromecast using Cast All The Things https://github.com/skorokithakis/catt. It contains the following....
<script type="text/javascript">
/***********************************************
* IFRAME Scroller script- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Please keep this notice intact
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/
//specify path to your external page:
var iframesrc="livescores.htm"
//You may change most attributes of iframe tag below, such as width and height:
document.write('<iframe id="datamain" src="'+iframesrc+'" width="100%" height="100%" marginwidth="0" marginheight="0" hspace="0" vspace="0" frameborder="0" scrolling="no"></iframe>')
</script>
And references:
<!-- saved from url=(0054)http://www.dynamicdrive.com/dynamicindex2/external.htm -->
<html data-kantu="1"><head><meta http-equiv="Content-Type" content="text/html; charset=windows-1252"></head><body>
<div id="datacontainer" style="position: absolute; left: 1px; top: 5px; width: 100%;" onmouseover="scrollspeed=0" onmouseout="scrollspeed=cache">
<!-- ADD YOUR SCROLLER CONTENT INSIDE HERE -->
<iframe src="https://digitalpool.com/tournaments/20220124-monday-night-10-ball-tournament/scores?navigation=false" style="border: none;" name="2022/01/19 Wednesday Night 9-Ball Tournament" scrolling="no" frameborder="0" marginheight="0px" marginwidth="0px" height="1250px" width="100%" allowfullscreen></iframe>
<!-- END SCROLLER CONTENT -->
</p></div>
<script type="text/javascript">
/***********************************************
* IFRAME Scroller script- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Please keep this notice intact
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/
//Specify speed of scroll. Larger=faster (ie: 5)
var scrollspeed=cache=3
//Specify intial delay before scroller starts scrolling (in miliseconds):
var initialdelay=500
function initializeScroller(){
dataobj=document.all? document.all.datacontainer : document.getElementById("datacontainer")
dataobj.style.top="5px"
setTimeout("getdataheight()", initialdelay)
}
function getdataheight(){
thelength=dataobj.offsetHeight
if (thelength==0)
setTimeout("getdataheight()",10)
else
scrollDiv()
}
function scrollDiv(){
dataobj.style.top=parseInt(dataobj.style.top)-scrollspeed+"px"
if (parseInt(dataobj.style.top)<thelength*(-1))
dataobj.style.top="5px"
setTimeout("scrollDiv()",40)
}
if (window.addEventListener)
window.addEventListener("load", initializeScroller, false)
else if (window.attachEvent)
window.attachEvent("onload", initializeScroller)
else
window.onload=initializeScroller
</script>
</body>
</html>
It looks great in a browser, but when I cast it using Cast All The Things, it takes forever to load and looks terrible. Any suggestions? I've googled until I'm blue in the face, however, because I'm self taught, I'm not even sure if I'm googling the right things to be able to smooth scroll and see something quickly without really long load times.
Any alternate suggestions? Or any suggestions to make this work seamlessly? Thanks in advance!

Insert iframe into site without using document.write

Our website uses an iframe to display a library of products we offer, and recently the iframe stopped loading in Google Chrome, because they stopped supporting document.write. We need a solution to show the page the same way we have been, but without using document.write. I am a novice, and have tried several solutions but nothing has worked.
what we have:
<script language="JavaScript">
<!--
var ss='<span style="font-size: small;"><b>NOTICE:</b> If you are having
trouble finding a pattern, try searching the first three letters of the
pattern name in the search bar. Also, be aware that some sheers may be
photographed with a window pane to show sheer quality.<br>If you are using
Google Chrome and have an issue viewing the library, please switch to another
browser.</span><br><br>';
var upper_limit = 500000000;
//-->
document.write(ss);
function getIP(json) {
document.write('<iframe frameborder="0" marginheight="0" width="100%"
height="700" src=" ' + 'http://client.richloomfabrics.com/cgi-bin/Wdrv01?
&PARPAR=CON&MELMEL=ALL&PTYPTY=UPH&IPAIPA=' + json.ip +
'&IPACOK=' + RandomNumber(upper_limit) + '&PGMPGM=WC033&>
</iframe>');
}
</script>
<script type="application/javascript" src="https://api.ipify.org?
format=jsonp&callback=getIP"></script>
We use a shopping cart, which is why we need the random number and IP. I have tried a few solutions I've seen but don't know enough about this to properly edit. Can anyone send me in the right direction?
You can also use appendChild
var iframeElem = document.createElement('iframe');
iframeElem.src = 'https://www.google.com';
document.body.appendChild(iframeElem);
In a very simple case you can just use innerHTML property of body, something like this
<script language="JavaScript">
<!--
var ss='<span style="font-size: small;"><b>NOTICE:</b> If you are having
trouble finding a pattern, try searching the first three letters of the
pattern name in the search bar. Also, be aware that some sheers may be
photographed with a window pane to show sheer quality.<br>If you are using
Google Chrome and have an issue viewing the library, please switch to another
browser.</span><br><br>';
var upper_limit = 500000000;
//-->
document.body.innerHTML += ss;
function getIP(json) {
document.body.innerHTML += '<iframe frameborder="0" marginheight="0" width="100%"
height="700" src=" ' + 'http://client.richloomfabrics.com/cgi-bin/Wdrv01?
&PARPAR=CON&MELMEL=ALL&PTYPTY=UPH&IPAIPA=' + json.ip +
'&IPACOK=' + RandomNumber(upper_limit) + '&PGMPGM=WC033&>
</iframe>';
}
</script>
<script type="application/javascript" src="https://api.ipify.org?
format=jsonp&callback=getIP"></script>

Resizing an iframe to fit content on multiple pages

Could somebody please show me how to fit an iframe to the content within? I have this because I am using one iframe on my website that when a link is clicked displays different pages and I would love for the iframe to fit to the content within as at the moment the iframe is too long for some page's content but too short for other page's content and it cuts the page off.
I do not really have much code to show which is relevant or that will be any help, however in line with the rules on Stack below is the code that I have so far.
I have seen some questions on here regarding the same thing but none that I really understand.
<iframe id="preview-frame" src="http://airforceadvice.com/PCS" name="preview-frame" frameborder="0" scrolling="no">
</iframe>
Add this to your head section
<script language="javascript" type="text/javascript">
function resizeIframe(obj) {
obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
}
</script>
And change your iframe to this:
<iframe name="Stack" src="http://stackoverflow.com/" frameborder="0" scrolling="no" id="iframe" onload='javascript:resizeIframe(this);' />
Is this what you're looking for?

iframe dynamic height doesn't work

I created a small widget which is basically a php file which contains an HTML AJAX based form. The form's height depends on the output of the AJAX response text.
Therefore, I need to change the height dynamically.
I tried to do that with some code and it works really well BUT only on localhost file.
This code works:
<iframe src="ajax/cfw.php" id="idIframe" width="400px" onload="iframeLoaded()" style="border: none;"></iframe>
<script type="text/javascript">
function iframeLoaded() {
var iFrameID = document.getElementById('idIframe');
if(iFrameID) {
// here you can make the height, I delete it first, then I make it again
iFrameID.height = "";
iFrameID.height = iFrameID.contentWindow.document.body.scrollHeight + "px";
}
}
</script>
However when I try to do an iframe of the exact file I pointed on my localhost which doesn't hosted on my localhost it doesn't work:
<iframe src="http://website.com/ajax/cfw.php" id="idIframe" width="400px" onload="iframeLoaded()" style="border: none;"></iframe>
Why is that, and how can I fix it ?
Thanks.

append date to iFrame src property with javascript

I'm passing a disclosure page through an iframe on an html page:
<iframe src="../disclosures/Pass_CO_GRN.html" name="disclose" width="790" marginwidth="0" height="400" marginheight="0" scrolling="Auto" id="disclose" frameborder="0" ></iframe>
I would like to add attach a datetime method to the src attribute to be sure the asset being passed (Pass_CO_GRN.html) does not cache in the client browser. The way I do this with the linked .js file (which I also don't want cached) is:
<script type="text/javascript">
document.write('<script language="JavaScript" src="linksHLS4.js?'+(new Date).getTime()+'"><'+'/script>');
and this works perfectly. I'm just not sure how to adapt it (if it CAN be adapted) to the iframe tag. anyone know?
document.write('<iframe src="../disclosures/Pass_CO_GRN.html?'+new Date().getTime()+'" ....></iframe>');
Surely.
Here is the jsFiddle. Is this what you are looking todo?
http://jsfiddle.net/2S5H5/
var frame = document.getElementById("myframe");
frame.src = "http://jsfiddle.net/user/signup/?" + new Date().getTime();

Categories