I am creating a preview for users entering html but I am having problems sharing the html across an iframe.
I have the following javascript
$(function () {
var pathname = "https://" + document.domain + "/newspreview.aspx";
localStorage.contents = $("#<%=Content.ClientID%>").val();
$("#preview").attr("src", pathname);
});
and the html is
<iframe id="preview" style="border:2px solid; width:880px;height:600px;" >
</iframe>
on the newspreview.aspx page I have the javascript below, all I get displayed is undefined.
Has anybody got any ideas why this is the case. (BTW both pages are using https)
<script type="text/javascript" language="javascript">
var result = localStorage.contents;
document.write(result);
localStorage.removeItem("contents");
</script>
Regards
Podge
Related
Well, I'm trying to dart back and forth around the internet, in a fashion similar to this: http://jsfiddle.net/Muimi/gm7gv/. Unfortunately, my code doesn't work. What is happening is that the page isn't redirecting at all. I noticed that it gave me errors like 'page does not exist', for google.com (which exists, just so everyone knows). So, any ideas?
<!DOCTYPE html>
<html>
<head>
<style>
#showUrl {
border:2px solid #0A9;
height:90%;
width:95%;
}
#url {
width:30em;
}
</style>
<script type="text/javascript">
function loadUrl() {
var url = document.getElementById( 'url' ).value;
var showUrl = document.getElementById( 'showUrl' );
showUrl.src = url;
}
</script>
</head>
<body>
<form>
Enter URL to load: <input type="text" id="url" />
<input type="button" value="Load URL" onclick="loadUrl()" />
</form>
<iframe id="showUrl"></iframe>
</body>
</html>
Are you including 'http://'? If not, the iframe is trying to load a relative path instead of an absolute path.
function loadUrl() {
var url = document.getElementById( 'url' ).value,
showUrl = document.getElementById( 'showUrl' );
showUrl.src = /$https?:\/\//.test(url) ? url : 'http://'+url;
}
Your code does works. I tried it on JsBin and it did work with my website's URL but didn't with Google's
http://jsbin.com/akugeg/1/edit
There can be three reasons:
You need to add a protocol so it works as an absolute URL not a
relative one.
Most code debugging services doesn't allow to load iframes, as it itself uses iframe to display the content - for security reasons.
Some websites don't like to be loaded in iframes so they just configure their servers to not to load other inside an iframe on other than their own domain.
But I can assure you that the code works and if you try it on your localhost it might work.
I'm working on a project which passes a variable into a iFrame with this code:
jQuery(function() {
var search = window.location.search;
jQuery(".iframe-wrapper").attr("src", jQuery(".iframe-wrapper").attr("src")+search);
});
But, when I pass through §ion=P1 in a URL, it just gives a 404.
Source of the iFrame: example.com/page?cart=1
After going to site.com/§ion=P1 the iFrame should change to example.com/page?cart=1§ion=P1
Anyway to pass through the §ion=P1 through the URL?
Please send your HTML as mine is working fine with the below:
<iframe width="500" height="200" class="iframe-wrapper" src="http://www.google.com?param=1"></iframe>
<script type="text/javascript">
$(function() {
var search = window.location.search;
search = search.replace("?","&");
$(".iframe-wrapper").attr("src", $(".iframe-wrapper").attr("src")+search);
});
</script>
I have an html image, and I am trying to figure out if it is possible to do a partial page refresh when someone clicks on the image. I was thinking I would use a javascript. I am using aspx, and mvc model
Here is my thought
<img id = "Img1" , alt = "Click me" src = /content/img1.gif/>
my script would look something like
<script type = "text/javascript" src ="../../Scripts/jquery-1.5.1.js" >
$(function()
{
$("#Img1").click(function()
{
$('#updatePartialView'). load('#Url.Action("myAction", "myController")');
});
});
</script>
but it doesn't seem to want to work, I don't even know if it is possible .
--Update per Comment
I have a series of images on the top, and when the user click on the images the bottom half of the page refreshes with information about that picture.
---update so I wanted to try something different but it doesn't work see below
<script type = "text/javascript" src ="../../Scripts/jquery-1.5.1.js" >
$(function()
{
$("#Img1").click(function()
{
alert("I clicked this");
});
});
</script>
Just remove closing ");" in your end of javascript myFunction(). It would be working.
But I would suggest to add the onclick handler as below.
<img id = "Img1" alt = "Click me" src="">
Script:
<script src="#Url.Content("~/Scripts/jquery-1.5.1.js")" type="text/javascript"></script>
<script type = "text/javascript">
$(function(){
$("#Img1").click(function(){
$('#updatePartialView').load('#Url.Action("myAction", "myController")');
});
});
</script>
If you set an unbeforeunload event inside an iframe, this is not triggered when you for instance click through to a link in the iframe. It works in IE and Firefox (not Opera, but Opera does not support onbeforeunload in general AFAIK).
Just wondering, am I doing something wrong? Should this behaviour not be possible? Or is it a bug in Google Chrome/webkit? Any workarounds?
Code example:
test.html:
<html>
<body>
<p>Main page content</p>
<script type="text/javascript">
window.onbeforeunload = function() {alert('unloadevent in main window');};
</script>
<iframe id="tpa" src="..test2.html"></iframe>
</body>
</html>
test2.html:
<html>
<body>
<script type="text/javascript">
self.onbeforeunload = function() {alert('unloadevent in frame window');};
</script>
Link to for instance google
</body>
</html>
This is fixed now. See Ticket.
I found an ungentle method to fix it.
In my parentPage which holds the domain "a.b.com":
<html>
<iframe id="OBU" name="OBU" src="c.d.com">
</iframe>
<script>
window.onbeforeunload = function() {
window.frames["OBUI"].frames["SubOBUI"].location =
"a.b.com/demo.jpg?t="+(new Date()).getTime();
}
</script>
</html>
In my "c.d.com":
<iframe id="SubOBUI" name="SubOBUI" src="a.b.com/demo.jpg"
onload="someMethodThatShouldBeExecutedWhileUnload"></iframe>
<script>
var someMethodThatShouldBeExecutedWhileUnload : function() {
alert(1);
}
</script>
Have a try!
Seems it is an open issue in webkit (and not about to be fixed soon):
https://bugs.webkit.org/show_bug.cgi?id=19418
If anyone knows of workarounds, let me know.
The alternative may be to handle the click event in your iframe links at the document level or to pre-process the iframe page and alter the links to execute your custom JS handler. Then suppress the propagation of click event based on your business rules.
I have a webpage with an <iframe> pointing to another website. I don't want this to block the loading of the rest of the page. Is there a way to load it asyncrounously?
It shouldn't block. If you want the main page to fully load first (eg, main page's images before iframe content) then you'll have to use a bit of javascript to set the url of the iframe, like <body onload="javascript:...">
Using jQuery, this works:
<script type="text/javascript">
$(window).load(function() {
var f = document.createElement('iframe');
f.src = url;
f.width = 1000;
f.height = 500;
$('body').append(f);
});
</script>
where url is some URL.
One problem we had was that while iframes already do load asynchronously, the main page will not fire OnLoad until the iframe has finished loading too.
We worked around this by 'faking' OnLoad by calling the method we wanted in a script element at the bottom of the main page, even outside the closing body tag:
</body>
<script type='text/jscript' language='javascript'>
BodyOnready();
</script>
I think #Coxy is correct that the OnLoad won't fire. At least when running some web page performance tests it seemed to me it is waiting for the iframe to consider the page to be fully loaded. I therefore use this small jQuery snippet to load the iframe:
HTML:
<iframe id="blabla"></iframe>
JS:
$(window).load(function() {
if ($('#blabla').length <= 0) { return; } // to avoid errors in case the element doesn't exist on the page / removed.
$('#blabla').attr('src','//example.com/page');
});
iframes should load asynchronously without any effort on your part.
you can wait until after 'onload' has fired to set the iframe's src:
<body onload="loadFrame">
then something like this:
function loadFrame(){
var myFrame = document.getElementById('myFrame');
myFrame.src = "myURL";
};
Some vanilla JS alternative:
HTML:
<iframe id="YOURID" src="about:blank">Loading...</iframe>
JS:
window.onload = function(){
document.getElementById('YOURID').src = 'https://insertYourUrlHere.com'
};
Although I agree this shouldn't be happening, you could wait for your webpage to be completely loaded, and then load the iframe contents. With jQuery, I think you can do something like this:
Supposing your IFRAME looks like: <iframe name="theOtherPage"></iframe>
$(document).ready(function(){
(window.frames || document.frames)["theOtherPage"].window.location = "http://theotherpage.com/";
});