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.
Related
I'm using iFrame Resizer to embed a cross domain iframe on a page. This works well, until I click on a link inside of the iframe that takes me to the next page.
In the iframe source page (the remote one) I've got the following code in the header:
<script src="https://cdn.jsdelivr.net/npm/iframe-resizer#3.6.1/js/iframeResizer.contentWindow.min.js"></script>
In the page that's embedding the iframe I've got:
<iframe id="crelate-iframe" src="https://foo.bar" frameborder="0" width="100%" scrolling="no">
</iframe>
and in the footer of the page:
<script type='text/javascript' src='https://cdn.jsdelivr.net/npm/iframe-resizer#3.6.1/js/iframeResizer.min.js?ver=1'></script>
<script>
(function($) {
$(function() {
$('#crelate-iframe').iFrameResize({
log: true,
heightCalculationMethod: 'lowestElement'
});
});
})(jQuery);
</script>
The logging doesn't give away much as far as I can tell. I can only see it initially adjusts the height of the iframe, but when I click through it doesn't and when the next page's height is smaller then I end up with a bunch of white-space at the bottom.
Any ideas what could cause this?
Each page that you load into the iFrame needs script added to it
<script src="https://cdn.jsdelivr.net/npm/iframe-resizer#3.6.1/js/iframeResizer.contentWindow.min.js"></script>
I'm building a site that can only be seen through an iframe. I also added a script that auto resize height can be adjusted.
But loading my blog so the added weight of having to load two pages at once. To cope, I apply the OnClick to load the iframe.
Auto Resize But it turned out to not work.
Load Iframe code:
<script type="text/javascript">
function okeBos() {
document.getElementById("iframeControl").innerHTML='<iframe scrolling="no" src="http://name-domain.com" style="border: 0; width: 100%;"></iframe>';document.getElementById("starApps").style.display="none";
};
</script>
<div id="iframeControl"></div><div id="starApps"><span onclick="okeBos()">Load Iframe</span></div>
Do you know how to work the Auto Resize for tricks like this? Please help me, thanks ..
EDIT
The following code snippet Resize My
Stored at sites that are loaded:
<script src='http://britha.com/Upload/MyFile/iframeResizer.contentWindow.min.js' type='text/javascript'></script>
<script>
var iFrameResizer = {
messageCallback: function(message){
}
}
</script>
Stored at the site containing the iframe:
<script src="http://britha.com/Upload/MyFile/iframeResizer.js" type="text/javascript"></script>
<script type="text/javascript">
iFrameResize({
log : true,
enablePublicMethods : true,
enableInPageLinks : true,
});
</script>
UPDATE
What I know about iframes is that they are usually the last on the DOM to load, so you have to expect a lag sometimes. I have neglected to ask if you can even load an iframe successfully by normal means (i.e. in the markup (HTML)). Anyways, I strongly suggest that you load your iframe the normal way because it won't be recognized by the iframe-resizer plugin. It has to coordinate between 2 pages, calculate, and adjust so I'm pretty sure it takes loading times into account. An iframe that pops up whenever the user decides to press a button is like 5 years to a computer (not scientific fact just an exaggeration).
I have made a Plunker and used the example provided by this repository and I added some of my own tests as well. Here is the most important code:
Parent Page
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="http://cdn.jsdelivr.net/iframe-resizer/3.5.3/iframeResizer.min.js"></script>
<script>
iFrameResize({options});
Child Page
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="http://cdn.jsdelivr.net/iframe-resizer/3.5.3/iframeResizer.contentWindow.min.js"></script>
<script>
MOST IMPORTANT: DO NOT CREATE THE IFRAME DYNAMICALLY
PLUNKER
OLD
Please explain how it doesn't work. It functions in this Snippet...How am I supposed to know what to fix if I do not have the auto-resize script?
SNIPPET
<script>
function okeBos() {
document.getElementById("iframeControl").innerHTML='<iframe scrolling="no" src="http://name-domain.com" style="border: 0; width: 100%;"></iframe>';
document.getElementById("starApps").style.display="none";
};
</script>
<div id="iframeControl"></div>
<div id="starApps">
<span onclick="okeBos()">Load Iframe</span>
</div>
I am currently using Ace (http://ace.c9.io/) to take code from an editor and execute it within an iFrame. My issue is that when I add something along the lines of
Code in Editor
<script type="text/javascript">
window.onload = function() {
alert("hello");
}
</script>
to the head or body of the iFrame, the code is never executed. This is my current code:
Injecting Code into iFrame
$("#btnRun").click(function(event) {
event.preventDefault();
// iFrame with id="preview"
var preview = $("#preview").contents();
// Get code from editor and wrap in <script> tags
var script = "<script type='text/javascript'>" + ace.edit("js-editor").getSession().getValue() + "</script>";
// Append code to head or body, in this case head
preview.find("head").append(script);
});
The code is successfully added to the iFrame, however it is never executed. I can also successfully add HTML/CSS and it displays in the iFrame, but the javascript is never touched.
I have tried wrapping the code in script tags within the editor only, as well as using an escape character on the closing tag: "</script>" but to no avail.
This is the iFrame in my index.html document.
iFrame in index.html
<iframe class="editor" id="preview" name="result" sandbox="allow-forms allow-popups allow-scripts allow-same-origin" frameborder="0">
#document
<!-- Editor content goes here -->
</iframe>
After the code is injected the iFrame looks like this
iFrame with Injected Code
<iframe class="editor" id="preview" name="result" sandbox="allow-forms allow-popups allow-scripts allow-same-origin" frameborder="0">
#document
<html>
<head>
<script type="text/javascript">
window.onload = function() {
alert("hello");
}
</script>
</head>
<body>
</body>
</html>
</iframe>
Also when calling the window.onload or window.top.onload event from within the iFrame, the code executes but only affects the page containing the iFrame and not the contents of the iFrame itself.
Thank you.
Note: When the code is not within window.onload it runs fine. However I wish to be able to execute this code when the frame's onload function is executed.
I would think that you are adding the JS to the iframe after the onload event has already fired.
Perhaps you could try simulating an event to run the preview code or dispatching the onload event again?
Might help: https://developer.mozilla.org/en-US/docs/Web/API/Window.dispatchEvent
I was able to fix this myself. The problem was that appending the script to be within the iFrame wasn't enough to make it work. To make the script only be executed within the iFrames DOM was to write directly to it.
$("#btnRun").click(function(event) {
event.preventDefault();
var previewDoc = window.frames[0].document;
var css = ace.edit("css-editor").getSession().getValue();
var script = ace.edit("js-editor").getSession().getValue();
var html = ace.edit("html-editor").getSession().getValue();
previewDoc.write("<!DOCTYPE html>");
previewDoc.write("<html>");
previewDoc.write("<head>");
previewDoc.write("<style type='text/css'>" + css + "</style>");
previewDoc.write("<script type='text/javascript'>window.onload = function() {" + script + "}</script>");
previewDoc.write("</head>");
previewDoc.write("<body>");
previewDoc.write(html);
previewDoc.write("</body>");
previewDoc.write("</html>");
previewDoc.close();
});
I think it would be more elegant to use the contentDocument property of the iframe, and then inject the script and trigger the parser so it actually interprets it as JavaScript.
I put up a small proof of concept on github. I hope it solves your problem in a more elegant manner.
https://github.com/opreaadrian/iframe-injected-scripts
Cheers,
Adrian.
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"
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.