Insert iframe into site without using document.write - javascript

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>

Related

Random YT Video

I want a random yt video playing on my website.
My code looks like this but don't works.
<head>
var vidArr = [
'HKIW9yRzm04', 'MU8iGMjq1Og', 'WaQ0aFW8YSI', 'DrxJCOVsV1E'
]
var vidID = vidArr[Math.floor(Math.random() * 4)]
$("#frame").attr('src', 'http://www.youtube.com/embed/' + vidID);
</head>
<iframe id=frame src=" height="100%" with="300px"></iframe>
I see several problems here:
Your Javascript code needs to be in a <script> tag. Simply putting it in the document <head> won't work.
That code needs to run after the <iframe> tag exists in the DOM. The <script> tag needs to follow the <iframe>, or the code needs to be put into an on-load block ($(function() { … })).
There are multiple syntactical issues in your <iframe> tag. The quotation marks are missing on the id (harmless but bad practice), there's a missing closing quote on the src=" attribute, and you've misspelled the width attribute as with.
Did you check does values returned by varID are correct yt video URL?

Can I print a page from a string? (JavaScript) [duplicate]

I have a .Net application that dynamically creates a small HTML page and pops it up in a new window using the javascript document.open method. Everything with that functionality is working fine.
Now I want to add a button to the HTML page that prints the page. I have tried using the following code to no avail:
<a href='print.html' onClick='window.print();return false;'>
<img src='images/printer.png' height='32px' width='32px'></a>
When the button is clicked in the popup window, nothing happens. But when the source code of of this page is saved and loaded in a browser as a separate page, the print button works perfectly. So it would appear that the problem is caused by the fact that the code is in a popup window. [The problem now appears to be that the code in written to the popup window after it is opened.] Does anyone know a way to fix this problem or any alternatives?
EDIT:
Other method that I have tried with the same results:
<input type='button' onclick='window.print()' value='Print' />
and
<a href='javascript:window.print()'>
<img src='images/printer.png' height='32px' width='32px'></a>
EDIT AGAIN:
The above code works in Firefox, but not in IE7. Any ideas on a work around for IE?
EDIT YET AGAIN:
Here is a test case using the code that npup posted below. Instead of the code for the popup window living in a separate html file, I am opening a blank url and then writing the code to it. This step appears to be what is causing the problem.
<html>
<head>
<title>main</title>
</head>
<body>
<h1>
Pop & print</h1>
<button onclick="pop();">
Pop</button>
<script type="text/javascript">
var POP;
function pop() {
var newWin = window.open('', 'thePopup', 'width=350,height=350');
newWin.document.write("<html><head><title>popup</title></head><body><h1>Pop</h1>" +
"<p>Print me</p><a href='print.html' onclick='window.print();return false;'>" +
"<img src='images/printer.png' height='32px' width='32px'></a></body></html>");
}
</script>
</body>
</html>
Here is a solution that worked for me:
newWin.document.write( newhtml );
newWin.window.location.reload(); // this is the secret ingredient
newWin.focus(); // not sure if this line is necessary
newWin.print();
I'm not 100% sure why this works but I think it has to do with one of the following: (1) an IE security issue, (2) a scope issue (i.e. after creating a new document, IE is confused about which document to print), or (3) a timing issue - the document is not ready to 'accept' a print command yet. In any case, after the reload the print dialogue appears without a problem.
It might be because you are doing a return false in the onclick event of the anchor tag.
Try this:
<input type="button" onclick="window.print()" value="Print" />
You can try:
<input type="button" onclick="self.print()" value="Print" />
or:
<input type="button" onclick="window.focus();window.print()" value="Print" />
But this might not work in MSIE due to restrictions in Cross-Frame Scripting. The best way to do this, I think, is to put the print button on the main window.
<script language="javascript">
var winref = window.open('print.html','windowName','width=400,height=400');
</script>
<form>
<input type="button" value="Print Popup" onclick="if (window.print) winref.print()">
</form>
There must be something more to it than the code shown. I think it works fine (been testing some now).
Here's a miniscule test case. Try it in your setup and see what happens! My checking was under Windows Vista, IE7 and IE8.
main.html:
<html>
<head>
<title>main</title>
</head>
<body>
<h1>Pop & print</h1>
<button onclick="pop();">Pop</button>
<script type="text/javascript">
var POP;
function pop() {
POP = window.open('popup.html', 'thePopup', 'width=350,height=350');
}
</script>
</body>
</html>
popup.html:
<html>
<head>
<title>popup</title>
</head>
<body>
<h1>Pop</h1>
<p>Print me</p>
<a href="print.html" onclick="window.print();return false;">
<img src="images/printer.png" height="32px" width="32px">
</a>
</body>
</html>
I have solved the problem by creating a blank HTML page with the standard HTML markup. I then added the content by creating a new DOM element and editing the innerHTML. The resulting code is the same as in the example, simply replacing the newWin.document.write command with the following:
var newDiv = newWin.document.createElement( 'div' );
newDiv.innerHTML = "<h1>Pop</h1>" +
"<p>Print me</p><a href='print.html' onclick='window.print();return false;'>" +
"<img src='images/printer.png' height='32px' width='32px'></a>"
newWin.document.body.appendChild(newDiv);
While the issue has been resolved, I am honestly not sure what was the exact cause of the problem. If anyone has any ideas, I would be glad to hear them.
You forgot the:
newWin.document.close();
Document must be closed before msie can print it.
This works in Chrome:
<body ><img src="image.jpg" alt="" style="display: block; width: 100%; height: 100%;">
<script type="text/javascript">
window.onload = function() {
window.print();
setTimeout(function() {
window.close();
}, 1);
};
</script>
</body>
If you want to print what's in the window you opened from, i suggest you use
window.opener.print();
in the popup.
I wanted to create a printer friendly version of a page that then automatically printed, this is what I came up with, seems to work great for me!
function printPage(){
var w = window.open();
var headers = $("#headers").html();
var field= $("#field1").html();
var field2= $("#field2").html();
var html = "<!DOCTYPE HTML>";
html += '<html lang="en-us">';
html += '<head><style></style></head>';
html += "<body>";
//check to see if they are null so "undefined" doesnt print on the page. <br>s optional, just to give space
//This allows you to reuse this on lots of pages with the same template
if(headers != null) html += headers + "<br/><br/>";
if(field != null) html += field + "<br/><br/>";
if(field2 != null) html += field2 + "<br/><br/>";
html += "</body>";
w.document.write(html);
w.window.print();
w.document.close();
};

Javascript; Calling src within the script?

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");

Why does using document.write to create an iframe "cancel out" all remaining Javascript?

This happens in all browsers, so there must be a reason.
Example:
<html>
<body>
<script>var a="support/";
var aa='<iframe src="http://google.com/' + a + '" />';
document.write(aa)</script>
<script>alert('test')</script>
</body>
</html>
The code after the iframe write (in this case alert('test')) doesn't execute. Why?
Because you're writing broken HTML into the document -- there's no > on the iframe tag.
Your HTML that you write into the document is invalid and causes the browser to fail interpreting the rest of the document, including the remaining <script> tags.
You are writing <iframe src="http://google.com/support/. Add "></iframe> and it's ok.
However, a cleaner approach would be not to use document.write at all (assuming you have some HTML element with id="container" to hold the iframe):
var iframe = document.createElement('iframe');
iframe.setAttribute("src", "http://google.com/support/");
document.getElementById("container").appendChild(iframe);
You need to close your quotes and iframe. This works:
<html>
<body>
<script>var a="support/";
var aa='<iframe src="http://google.com/' + a + '" />';
document.write(aa)</script>
<script>alert('test')</script>
</body>
</html>
This code is Ok and working fine. You can check it on JSFiddle Live DEMO. Rest you can edit it with your data..
<script type="text/javascript">
var write_variable="p/about.html";
var write_iframe='<iframe src="http://www.exeideas.com/' + write_variable + '" />';
document.write(write_iframe);
</script>
Or you can check it online via HTML Editor And Previewer

Variable for img src=

I have a question.
Firstly, I am not going to pretend that I know what I am talking about here. I am a newbie to http and JavaScript.
I think my question may be answered in this post
IMG SRC tags and JavaScript
but I thought I would explain the exact thing I am trying to achieve in case there is an easier way.
I have a webpage, I want to display an image on it. Only thing is, the image is coming from an automated system monitor, the image is automatically generated each day and placed in a new directory depending on date.
e.g. On April 4 = "http://host/partition/2009/apr/04/cpu.gif"
e.g. On April 5 = "http://host/partition/2009/apr/05/cpu.gif"
To facilitate this, I have created some basic JavaScript to give me the date in the format I need it. I have all that working. Now I just want to use that variable I created to show the image.
I have the JavaScript code stored in a function called displaydate()
If I do this <script language="JavaScript"> displaydate() </script> I see
"http://host/partition/2009/apr/05/cpu.gif" and that is correct.
Now how do I display this on the site correctly?
<img src="displaydate()" </td> //This does not work. I am just adding it to show where I have been heading.
P.S. I have read a lot of pages on this and been trying a lot of things, but have had no luck so far. Any help, would be much appreciated.
Yes, that page probably does answer your question. Basically, you want this javascript:
<script type="text/javascript">
document.getElementById('image').src = "yourpicture.png";
</script>
Except you want to replace the "yourpicture.png" with the function you wrote to generate the correct path to the image on disk, so...
<script type="text/javascript">
document.getElementById('image').src = displaydate();
</script>
Of course, you might need to modify this a bit for your own uses, the getElementById will take as an argument whatever the id attribute of your < img > tag is. You probably want to execute the above javascript after your page has loaded, i.e.:
<html>
<head>
<script type="text/javascript">
function load()
{
document.getElementById('image').src = displaydate();
}
function displaydate()
{
//your displaydate() function here
}
</script>
</head>
<body onload="load()">
<img src="nothing.jpg" id="image" name="image"/>
</body>
</html>
You should just need to change this line
document.write("http://host1/Shared/" + year + "/" + month + "/" + day + "/cpu_abs.gif");
to
return "http://host1/Shared/" + year + "/" + month + "/" + day + "/cpu_abs.gif";

Categories