simple Iframe in javascript variables - javascript

I am trying to iframe google.com i have tried dozens of combinations but the page keeps coming up blank.
<script type="text/javascript">
var urlPath=http://google.com;
document.write('<iframe scrolling="yes" height="350" width ="350" src="'+urlPath+'"><\/iframe>');
</script>

var urlPath='http://google.com';
Just fix the variable value.

Google does indeed not load in an iframe(same origin restriction) Google has different ways for adding their searchbox and/or search results to your website. (search for google api)
And to give an example to what I commented in the question:
And if you must use JavaScript instead of html to get the iframe in your page I would suggest using code like the following:
var iframe = document.createElement('iframe');
iframe.src='http://yahoo.com';
document.body.appendChild(iframe);
​

Your code has errors in it. See this jsFiddle http://jsfiddle.net/davew9999/JqHG9/
var urlPath = "http://www.google.com";
document.write('<iframe scrolling="yes" height="350" width ="350" src="' + urlPath + '"></iframe>');​
Not sure why you are doing in in JavaScript you could just do
<iframe scrolling="yes" height="350" width ="350" src="http://www.google.com"></iframe>
One thing to note, http://www.google.com won't load in an iFrame, as mentioned in the comments by Greg Rozmarynowycz, Google don't allow you to load it in an iFrame that isn't hosted by Google. Change the src to http://www.amazon.com to see that the code works.

Related

How to redirect page inside iframe to another one but we must stay in iframe

Could anyone help me?
Is it possible to code this?
Redirect page inside iframe to another one but we must stay in iframe .
Without influence to parent site.
I tried many scripts but nothing worked.
Here is main code which i use. width and height is only for testing.
I use HTML5 sandbox to prevent iframe breaks to main site.
I need that to hide referer. Now parent site is showed as referer in iframed site, but i want to first site in iframe was used as referer to redirected one. Maybe it is crap, but i need that.
<!DOCTYPE html>
<html>
<body>
<iframe width="1025" height="350" sandbox="allow-same-origin allow-scripts allow-popups allow-forms" src="URL"; </iframe>
</body>
</html>
If you want the script to run from the frame:
document.location.href = "http://...";
If you want the parent page to redirect (change) the frame location:
HTML:
<iframe name="myFrame" ... />
JavaScript:
window.frames["myFrame"].location = "http://..."
$(function() {
if ('app' !== $('body').attr('id')){
window.setTimeout(function(){
window.top.location.href = 'your redirect url';
}, 5000);
}
});
in IFRAME use
sandbox="allow-top-navigation allow-scripts allow-forms"

calling an iframe inside a js function

I'm trying to create an external link, that appears within the same site.
Here, If I click on a link it should display the contents of that link(external site) within our site. i.e., if my site is siteA and in that I place a link (to siteB) that will redirect to 'siteB' closing 'siteA'. I just want to avoid the situation besides I want to make the siteB to be opened within the siteA
My idea is when the link is opened, an iframe will be created and the external site will be opened within that Iframe.
Google
<script type="text/javascript">
function executeOnClick(){
<iframe name="your_frame_name" src="www.google.com" > </iframe>
return true;
}
</script>
I wrote this code, but couldn't get what I expect. I tried to use button, but it's not working.
Is there any other way to fix my issue..
No javascript is needed, use target attribute:
Load the page
<iframe id="iframe1"> </iframe>
JSFiddle
IMPORTANT: you cannot display http://google.com in iframes because of their X-Frame-Options. See: The X-Frame-Options response header
function executeOnClick(){
$('body').append('<iframe name="your_frame_name" src="www.google.com" height=200 width=200 > </iframe>');
return true;
}
try this
The iframe markup should not be inside your JavaScript function. That does nothing except throwing an exception. Put the markup below your anchor and change its src on click:
Google
<iframe id="targetFrame"></iframe>
<script>
function executeOnClick(target) {
document.getElementById("targetFrame").src = target.src;
return false;
}
</script>
In fact you don't even need JavaScript to do this. You can use the target attribute of the anchor and set it to be the name of the frame you want to open the page in:
Google
<iframe name="targetFrame" id="targetFrame"></iframe>
Change to this:
onclick="executeOnClick(this); return false;"
and do this in your funcition:
<script type="text/javascript">
function executeOnClick(elem){
var frame = '<iframe name="your_frame_name" src="'+ elem.getAttribute('href') +'" > </iframe>';
document.body.appendChild(frame); // <----append it here.
}
</script>
In your onclick function you have to return false; to stop the default behaviour of an anchor to take you to the another page.
please note that the google.com will not work with iframe
Google
<iframe id="targetFrame"></iframe>
<script>
function executeOnClick(src) {
document.getElementById("targetFrame").src =src;
}
</script>
<iframe src="www.google.com" height="400" width="551" frameborder="0" scrolling="no" runat="server"></iframe>
Use runat attribute too. Hope this works.
If doesn't, what's the error?

Cross Browser Printing using iFrame in Javascript

I want to print using iFrame and javascript.
Below are my sample codes for the same:
Javascript
function printDiv(divP) {
window.frames["print_frame"].document.body.innerHTML = $(divP).html();
window.frames["print_frame"].window.focus();
window.frames["print_frame"].window.print();
}
HTML
<iframe name="print_frame" width="0" height="0" frameborder="0" src="about:blank">
</iframe>
This Code is working in IE and Mozilla only. Other Browsers are printing White pages. I don't want to use the Media Queries. What could be the possible issue?
The solution :
Few changes : document.write :( and open and close functions) + iframe 1px size..
function printDiv(divP) {
window.frames["print_frame"].document.open();
window.frames["print_frame"].document.write('<body>aaaaaaaa</body>');
window.frames["print_frame"].document.close();
window.frames["print_frame"].focus();
window.frames["print_frame"].print();
}
printDiv()
http://jsbin.com/eLIQAXU/4/quiet
this is working in FF , chrome,IE ,safari :

Javascript wont load if iframe is present

I am unable to get javascript to load in a page that contains an iframe. I deleted the iframe and it loads just fine.
Here is the relevant html:
<iframe id="iframe" src="Welcome.html" width=50% height=90% name="iframe"/>
</body>
<script type="text/javascript">
Fname = prompt("Please type in your first and Last name", " George Washington");
Fname = Fname + "";
iFrames are not defined like that
<iframe id="iframe" src="Welcome.html" width=50% height=90% name="iframe"/> No Frame Support </iframe>
Give that a go
Its implicitly closing the tag at the end, And the middle of an iframe is the no frame support
Your JS should be inside the body. I believe you also need a separate closing tag for the iframe.

Javascript not running on site

On the following site (http://www.homefresh.co.nz/gallery.html) there is a piece of javascript up the top to dynamically change the height of my iFrame
Javascript in header:
<script type="text/javascript" language="javascript">
<!--
function calcHeight()
{
//find the height of the internal page
var the_height=document.getElementById('the_iframe').contentWindow.document.body.scrollHeight;
//change the height of the iframe
var the_height = parseFloat(the_height) + 15;
document.getElementById('the_iframe').height=the_height;
}
//-->
</script>
and in the page is the iFrame code:
<iframe src="http://www.dpdesignz.co.nz/homefresh/" id="the_iframe" onLoad="calcHeight();" height="1" width="920px" scrolling="auto" frameBorder="0"></iframe>
except for some reason it's not updating
I have the exact same code here and it works (http://www.dpdesignz.co.nz/homefresh/test.htm)
Can anyone see anything stopping it?
The page with script and the iframe page have to be on the same domain. This is required by the same Same origin policy because of security matters.
So if you want to access document that's on www.dpdesignz.co.nz then you have to use host page that is on www.dpdesignz.co.nz domain. That's why one of your scripts works and the other don't.

Categories

Resources