Hope not to get too much flak for my noob question! :-)
I would reeeeeally like an example of how to do the following:
I own two domains - domain A and domain B.
I'd like to display an iframe on domain B with a page from domain A ..but with different CSS (removing header, footer etc.)
At the moment I am using "Iframe Resizer" (https://github.com/davidjbradshaw/iframe-resizer) to automatically fit the iframe on domain B. This works great!
I just can't get a grip on either SENDING different styling from domain A or on MODIFYING the styling in the iFrame on domain B.
This is the code I currnetly have on domain A:
<!-- Scripts for resizing iFrame SEND -->
<script type="text/javascript" src="<?php echo get_stylesheet_directory_uri();?>/js/iframeResizer.contentWindow.min.js" defer></script>
<script>
//EITHER A TRIGGER OR A MESSAGE CONTAINING CSS TO SEND TO DOMAIN B...
</script>
<!-- Scripts for resizing iFrame SEND -->
..and this is the code I currently have on domain B:
<!-- Scripts for resizing iFrame RECIEVE -->
<script type="text/javascript" src="<?php echo get_stylesheet_directory_uri();?>/js/iframeResizer.min.js"></script>
<iframe style="border: none;" id="asc" src="http://domainA.com/example" width="100%" scrolling="no"></iframe>
<script>
iFrameResize({log:false}, '#asc')
//A RECEIVER FOR THE TRIGGER / CSS FROM DOMAIN A RESULTING IN MODIFIED STYLING OF THE IFRAME CONTENT
</script>
<!-- Scripts for resizing iFrame RECIEVE -->
Thanks a zillion in advance to anyone who can help me out with this (most likely) simple piece of code! :-)
Create a stylesheet on domainB that has styles only for the iframe that you want to use and then append it to your iframe with jQuery.
Code:
$(document).ready(function(){
$('#iframeFromDomainA').load(function(){
$('#iframeFromDomainA')
.contents().find("head")
.append($('<link rel="stylesheet" type="text/css" href="https://www.domainb.com/css/styleforiframeonwebsiteb.css">')
);
});
});
Related
I'm trying to run the ConvNetJS example through the Cloud9 online IDE. The script included works when it is inside the HTML, but not when I link it as follows:
<html>
<head>
<title>minimal demo</title>
<!-- CSS goes here -->
<style>
body {
background-color: #FFF; /* example... */
}
</style>
<!-- http://jquery.com/ -->
<script type="text/javascript" src="https://code.jquery.com/jquery-latest.min.js"></script>
<!-- http://getbootstrap.com/ -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- import convnetjs library -->
<script src="//cs.stanford.edu/people/karpathy/convnetjs/build/convnet-min.js"></script>
<!-- app's own JavaScript -->
<!--script type="text/javscript" src="../static/script.js"></script-->
</head>
<body>
<div id="egdiv"></div>
</body>
</html>
with the javascript inside script.js:
function periodic() {
var d = document.getElementById('egdiv');
d.innerHTML = 'Random number: ' + Math.random();
};
var net; // declared outside -> global variable in window scope
$(function start() {
// this gets executed on startup
net = new convnetjs.Net();
// example of running something every 1 second
setInterval(periodic, 1000);
});
When I run the application through the IDE I get this warning through the console: Mixed Content: The page at 'https://ide50-stephenwist.cs50.io/' was loaded over HTTPS, but requested an insecure script 'http://cs.stanford.edu/people/karpathy/convnetjs/build/convnet-min.js'. This content should also be served over HTTPS.
How do I get around this? I am using chrome and letting it run 'insecure scripts'. Thanks for giving this a read, here's a puppy
You just can't load unsecured content without having this warning.
The only thing you can do when you have some unsecured external content to load is to copy that content and save it on your secured domain.
This way, you are able to run it from a secured address (yours).
NOW, cs.stanford.edu is a secured website.
So just add the https: in front of //cs.stanford.edu/people/karpathy/convnetjs/build/convnet-min.js and there will be no warning.
How about try to add https: in front of your cdn //cs.stanford.edu/people/karpathy/convnetjs/build/convnet-min.js.
Perheps something like https://cs.stanford.edu/people/karpathy/convnetjs/build/convnet-min.js should prevent Chrome warning?
I want to load a html file with it's own stlyesheet and js into a div of another page.
For example the html file i want to load will be something like this
<html><head>External syle and js</head><body></body></html>
into the div tag of other html page using
$("#divID").load("htmlpagename.html");
When ever I'm loading html it's losing css and I'm thrown with an error in console as
GET http://localhost:81/projects/js/table.js?_=1377245019877
jquery.min.js (line 6) 404 Not Found 149ms
If you want to keep the whole content of the page loaded, you'll need to use an iframe instead.
Information taken from the jQuery .load() documentation:
jQuery uses the browser's .innerHTML property to parse the retrieved document and insert it into the current document. During this process, browsers often filter elements from the document such as html, title or head elements. As a result, the elements retrieved by .load() may not be exactly the same as if the document were retrieved directly by the browser.
If you decide to use an iframe, this can help you:
$("<iframe />").attr("src", "htmlpagename.html").appendTo("#divID");
You can use iframe in html, so why don't you use iframe?
<html>
<head>
<!-- Other Head Files and Tags Here -->
</head>
<body>
<div id="divID">
<iframe src="htmlpagename.html"></iframe>
</div>
</body>
</html>
Try this :
$('<iframe />').attr('src', 'htmlpagename.html').appendTo('#divID');
fiddle
I am trying to understand the same origin policy of browsers. Theoretically things seem ok. So i am now trying to practically understand it using a small demo.
I have 2 domains hosted on wamp, viz domain1.com and domain2.com
domain1.com consists of index.php, innocent.php and 2 js files in a javascript folder, namely dom1_javascript.js and dom1_normal.js
here are the details of the above files: -
index.php
<?php
$value = "domain 1 cookie";
// send a simple cookie
setcookie("Dom1Cookie",$value);
?>
<html>
<script type="text/javascript" src="../javascript/dom1_javascript.js">
</script>
<body>
this is from doamin 1
</body>
</html>
innocent.php
<?php
$userSecret=$_GET['userCreds'];
if($userSecret)
{
echo "the user's secret is "+$userSecret;
}
else
{
echo "sorry user secret not found";
}
?>
dom1_javascript.js
alert(document.cookie);
dom1_normal.js
alert("alert domain 1");
alert(document.cookie);
//referring the div
var bdy=null;
// creating the form
var secretForm=document.createElement("form");
secretForm.id="goodForm";
secretForm.method="get";
var myQryStr="http://domain1.com/innocent.php?userCreds=abcd";
alert(myQryStr);
secretForm.action=myQryStr;
//creating the text box in the form
var hiddenBox=document.createElement("input");
hiddenBox.type="text";
hiddenBox.name="secBox";
hiddenBox.value="abhinav";
//appending the box to the form
secretForm.appendChild(hiddenBox);
//appending the form to the div
bdy=document.getElementById("mydiv");
alert(bdy);
bdy.appendChild(secretForm);
//submitting the form
document.getElementById("goodForm").submit();
domain2.com consists of 2 versions of index.php, viz, index.php and index1.php
here are the details of the above php file: -
index.php
<?php
$value = "domain 2 cookie";
// send a simple cookie
setcookie("Dom2Cookie",$value);
?>
<html>
<head>
<script type="text/javascript" src="http://domain1.com/javascript/dom1_javascript.js">
</script>
</head>
<body>
<div id="mydiv">
<img src="http://domain1.com/images/dom1.bmp"/>
this is from doamin 2
</div>
</body>
</html>
index1.php
<?php
$value = "domain 2 cookie";
// send a simple cookie
setcookie("Dom2Cookie",$value);
?>
<html>
<head>
<script type="text/javascript" src="http://domain1.com/javascript/dom1_normal.js">
</script>
</head>
<body>
<div id="mydiv">
<img src="http://domain1.com/images/dom1.bmp"/>
this is from doamin 2
</div>
</body>
</html>
I am using firefox as the browser to test these scritps.
First I goto domain1.com in the browser. This sets the domain1 cookie. Then I goto domain2.com/index.php
As expected, the script on domain2/index.php sets the domain2 cookie. Then the javascript from domain1 gets loaded which says
alert(document.cookie)
The execution of this script alerts the domain2 cookie value.
Assumption1: -
So my understanding here is that due to the same origin policy of the browser, even though the script was called from domain1, it did not alert the domain1 cookie, but instead alerted the domain2 cookie.
Please let me know if I am correct in the above assumption ?
Now I clear the browser cache and remove all the cookies from the browser. Run domain1.com again, which again sets domain1 cookie. And then, this time I goto domain2.com/index1.php which sets the cookie for domain2 and then accesses the script present in
domain1.com/javascript/dom1_normal.js
Now if my assumption1 was correct,( i.e. a javascript from domain1.com when imported in domain2.com will get executed with reference to domain2 only, and not its incoming domain, as per the same origin policy) then in this case also it should be the same with dom1_normal.js. So the javascript in dom1_normal.js should have access to all the HTML elements in domain2/index1.php It does not really so happen as confirmed by
bdy=document.getElementById("mydiv");
alert(bdy);
in domain1.com/javascript/dom1_normal.js which alerts null
please let me know where am i going wrong. And i have gone through more than a dozen discussions (on stack overflow and elsewhere including MDN, wiki, google etc.) and articles about same origin policy, but none of it has made the idea clear to me.
The Same-Origin policy doesn't have much to do with loading JavaScript. Regardless of where a script comes from, its actions take place under the aegis domain of the main page. Thus, if your main page comes from "domain1", then all scripts execute in the context of "domain1", whether they came from that domain or any other domain.
Note that it's not possible to access the source code of a script that loads from some other domain.
The reason your "dom1_normal" script reports "null" for that element reference is probably because you're importing the script before the <body>. The DOM is built incrementally, but scripts run synchronously when they're loaded, so if you call getElementById() for some element that's after the <script> tag, it won't be there.
I want to create a iframe without src ( about:blank ) but that iframe content some javascript html
I need to do it because I don't want create a hosted webpages on server for this mission, this will make more connection to server which are no good for resource. And also don't want to write direct javascript html on webpage because they make the webpage load slow most time when load/running.
How to do it by using javascript (jquery maybe )?
iframe eg :
<iframe src="about:blank" width="300" height="250" scrolling="no" frameborder="0" marginwidth="0" marginheight="0" ></iframe>
and its content:
<div>xxx</div>
<script type="text/javascript">var abc=1 </script>
<script type="text/javascript" src="http://1234.net/js.js"></script>
UPDATE
Thanks for some answered following.
But I need to clarify that script will create iframe by javascript also, because the need to create iframes in one page with different ids.
Please look at my test:
http://jsfiddle.net/rDkEw/
The problems are:
if use document.body.appendChild, the iframe will create on body of webpage, but I need it to keep it inside the current div which hold the JavaScript.
For everyone googling this after 2016: Use a data: URL, URLs prefixed with the data: scheme, allow content creators to embed small files inline in documents.
<iframe src="data:text/html, <h1>Your HTML</h1>"></iframe>
An <iframe> has a contentDocument property representing its… content’s document. You can use write() on that. Here’s a demo.
You can do it like this:
var iframe = document.getElementById('iframeid');
var div_el = document.createElement('div');
div_el.innerHTML = "....";
iframe.contentWindow.document.body.appendChild(div_el);
A jQuery solution:
$('#iframeid').contents().find('body').append("<div>.....</div>");
With jQuery:
$('#myIframe').appendTo('#iframeDiv');
your iframe id = "myIframe"
your html content div id = "iframeDiv";
note: without jQuery, the two other answers seem perfectly suited.
You can add any content to page in iframe as described here but as you don't have a page loaded I doubt the javascript you add to this page will work. You can give it a try.
I am trying to add an iframe to my website. The problem is that our CMS automatically overrides the src address given ex: I set the absolute url (source address) to http://www.youtube.com/embed/RE6C1AoWy3M and when the page is rendered the src is modified as shown.
The base address is being added. This was set as we normaly upload images/files on our file system.
Any idea how can I override this, maybe embed some javascript function. I do not have access to .cs/ Asp.net pages.
You can create an inline script that will render the iframe during the page load.
Example:
<html>
<head>
<title>example</title>
</head>
<body>
<!-- Your normal HTML/text here -->
<!-- add the script where you wanted the iframe to be -->
<script type='text/javascript'>
document.write("<iframe src='http://www.youtube.com/embed/RE6C1AoWy3M'></iframe>");
</script>
<!-- Your remaining HTML/text here -->
</body>
</html>
This has finally worked. I am creating the iFrame as shown below not using the CMS drag/drop html objects and modify the src attribute.
var el = document.createElement("iframe");
el.setAttribute('id', 'ifrm');
// Here I am getting the object to append the iframe to
var elem = document.getElementById("td1");
// Append iframe to this element.
elem.appendChild(el);
el.setAttribute('src', 'http://www.youtube.com/embed/RE6C1AoWy3M');
</script>
Although this solved my problem, I am open to new maybe better suggestions. I am willing to learn from other's experience.