I have some code to take content out of a page within an iframe and adding it to the parent page. The parent and iframe source page are in the same directory so no cross domain issues.
This will work on a server but apparently not if all the files are running local on your computer. I was tearing my hair out before I figured that out. Running the files locally just gives cont2 an undefined value.
I need to run this locally without a server because of the sensitivity of the files I'm dealing with. I don't know how to do that though.
I tried setting document.domain="local.com" in both files but that didn't work.
Any way to do this?
Thanks
Parent Page:
<html><head>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script></head><body>
<iframe id="frame1" src="page1.html"></iframe><br>
<button id="button2">Something</button>
<script>$("#button2").click(function(){
cont2 = $("#frame1").contents().find("div").html();
console.log(cont2);
$("#div2").html(cont2);
});</script>
<div id="div2">TBD</div>
</body></html>
iFrame Source:
<html>
<head></head>
<body>
<div id="div1">TODO write content</div>
</body>
</html>
Some versions of IE will allow this to work out of the box. Seems like it treats local files as on the same server.
For Chrome, you need to temporarily disable a couple things. See:
Disable same origin policy in Chrome
Related
https://github.com/ivi989/ivi989.github.io
So, when I open this on local host everything is centered. However if I open the same files on gitub it is not. Button goes left. If I center the button the hr is no longer centered. If using flex for hr it disappears and when I get it back its all the way to the right and I cant get it back to center.
Can someone help pls?
Thank you.
This
<link href="//cdn-images.mailchimp.com/embedcode/slim-10_7.css" rel="stylesheet" type="text/css">
What actually happening is that when you open your index.html the above mentioned css is not downloaded from internet instead it search for a file with the same name in your local system.When you open your index.html through git, https:// is appended with that link and thus your css is downloaded and your button is aligned left.
Solution
Add this style="text-align:center" to your div with this id="mc_embed_signup_scroll"
<div id="mc_embed_signup_scroll" style="text-align:center">
Good Afternoon, I created a banner ad in HTML5 using div containers and css3 animation. I submitted my banner to who i needed to submit it to and they responded they want a gif file. I'm a little confused as to what they need. how do i convert the html5 to a gif. It seems they're following XAXIS/Google ADX criteria. I know that they do not actually want an animated gif, but are looking for a backup of sorts. Never dealt with this type of stuff so your help is greatly appreciated. Here's the documentation:
Initial Load - 200kb
Secondary Load
Max Additional Load - 1 MB
Max number of file requests – 15
Backup static image must be supplied separate from the HTML5 zip for trafficking
DCM doesn’t accept HTML files which are made using the SWIFFY tool
HMTL must include at least 1 clickTAG (See Below for the clickTag supported by DCM)
<html>
<head>
<meta name=”ad.size” content=”width=300,height=250”>
<script type='text/javascript'>
var clickTag = 'https://www.google.com';
</script>
</head>
<body>
[The rest of your creative code goes here.]
</html>
Please ensure that your creative uses the clicktag variable as the click-through URL:
<a href='javascript:window.open(window.clickTag)'>
<img src='images/dclk.png' border=0>
</a>
</body>
</html>
All banners require a static backup gif (or jpg, or png) that displays when the animated version fails to load. If you don't have a Photoshop layout to make a static version from you can do this:
Run the banner locally in your browser
Take a screenshot of the frame you want for the static version
Crop the image down to banner size & save as gif, jpg, png or whatever
I am at an absolute loss in this situation. I've tried changing the src value of an iframe with pure JS and jQuery, but both attempts just close the iframe object!
I have an iframe in the HTML as defined:
<body>
<div id="divBody">
<img src="images/test.gif" onClick="...see_below..." />
<iframe name="ifTarget" id="ifTarget" src="http://www.yahoo.com" allowtransparency="true" scrolling="auto"></iframe>
</div>
</body>
I also have an img on the page that, when clicked, should change the src of that iframe as defined:
document.getElementById('ifTarget').setAttribute('src', 'http://www.google.com');
and alternatively via jQuery:
$('#ifTarget').attr('src','http://www.google.com');
In both cases, the iframe just closes down an I'm left with the following error via FF Error Console:
Security Error: Content at https://www.google.com/ may not load data from http://127.0.0.1/.
I am running this from the local computer, but I get this same message if run from a hosting company (with the trialing URI adjusted accordingly). Any thoughts?
Thanks,
Dave
I have an iFrame that I use to display different media types by setting the "src" attribute. When I set the src to a .png file type however, Firefox does not render the image for me, but instead asks the user if they want to download the image.
Is there a way to force it to render? Is this a client issue / feature or is it something I've missed?
<iframe id="ctl00_mainContent_uxEditClient_ifrmThumb" width="100px" height="100px" src="http://localhost:54468/Docs/Media/Partners/Logos/logo.png">
<html>
<head></head>
<body></body>
</html>
</iframe>
The src property of an iframe is not meant to be an image but rather an URL of page containing HTML. Firefox is asking you to download the image because the server is writing the image bytes to the response stream.
Use an img element to display images.
I tested your code but using a different image source:
<iframe id="ctl00_mainContent_uxEditClient_ifrmThumb" width="100px" height="100px" src="http://upload.wikimedia.org/wikipedia/commons/7/7a/Basketball.png">
<html>
<head></head>
<body></body>
</html>
</iframe>
I think the problem is not related to Firefox or HTML, I guess it is the header your server is sending. HTTP header may force the browser to download instead of visualizing.
Please test my code in your specific Firefox version.
i am working on an mvc page that allows users to securely logon via a colorbox modal window. the modal is layed out something like this:
<html>
<body>
<div id="overlay" style="display: block;" class="overlay"> <div>
<div id="colorbox" style="display: block;">
<iframe id="logonIFRAME">
logon form is in this ssl iframe
</iframe>
</div>
<div id="restofpage"> </div>
</body>
</html>
thats the basic layout.
what happens is when the iframe form is authenticated, it calls parent.$.fn.colorbox.close() which closes the modal and reloads the parent page.
now the problem is the colorbox.close script is in the parent page (not the iframe) so it cannot be called from the iframe due to the protocols being different (https and http).
so how can i either call the script cross protocol (which i believe you cant do) or from the iframe set the colorbox div's display attribute to none and hiding the overlay. this would hide the modal just as well but can the code in the iframe talk to the parent pages html? if it could i would use something like:
$('#colorbox').attr('style', 'display: none;');
but that jquery doesnt work.
anyone got any ideas on how best to proceed?
It's kind of Hack i think of... On success login redirect to normal page mean having http, and in that you write your code to call parent windows by simpally adding javascript.
I found this is working for me, hope it works for you too. however it's not pure solution but just a workaround
Imran