I'd like to make another "context" into my html page. Such as a page loaded by iframe. Now, what I'd like to do is use this iframe but without src.
Somethings like :
<iframe allowtransparency="true" frameborder="0" scrolling="no" style="width:300px; height:20px;">
<html>
<head></head>
<body>
<div>
Hello World
</div>
</body>
</html>
</iframe>
I need this because I wont use ajax and I need a load a script that could make some problems in the same page-context (as I wrote yesterday on SO).
It seems that this is impossible :(, the only way to create a separate html file.
Source: http://stackprogramer.com/7276457/is-it-possible-to-create-iframe-without-src-but-with-my-html
Related
I am looking for a way to embed HTML code in a page. I already know that the embed element can do this for me:
<!DOCTYPE html>
<html>
<body>
<h1>The embed element</h1>
<embed type="text/html" src="snippet.html" width="500" height="200">
</body>
</html>
However, the embed element takes an html file as src. I am wondering if I could pass a verbatim string (as the HTML code) to the embed element. Is this doable with any other mechanism?
My goal is to be able to change the verbatim string dynamically with a JS code, so that the generated embedded HTML changes dynamically.
You can add your html code to the srcdoc of an iframe:
<iframe srcdoc="<html><body><h1>Hello World!</h1></body></html>" />
I have this iframe inside an iframe. Both of this iframe has no ID. The code looks like this:
<div id="Test">
<iframe>
<iframe>
<head>
<style>*CSS code right here*</style>
</head>
<body>
</body>
</iframe>
</iframe>
</div>
Could i add some CSS on the 2nd iframe using javascript?
To fetch the next iframe try this..
$(document).ready(function(){
$("iframe").next(iframe).css({"color": "red"});});
I am trying to present a new feature on a website already in production. Therefore, I am loading this website using an iframe into my development server as follows:
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<iframe id="myframe" src="https://production_website.com" style="border:none;" width="100%" height="600" seamless></iframe>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
console.log($("#myframe").contents());
$("#myframe").contents().find(".importantContent").click(function(){
console.log($(this));
});
</script>
</html>
I am trying to intercept user clicks on a specific DOM element in the iframe zone, based on that I'll be injecting a specific HTML content to demonstrate a feature. But listening with jquery click() is not working.
Any suggestions on what to do?
I am aware of the same origin policy restriction, but for a web designer/developer who doesn't have control over the server, aren't there workarounds like disabling the restriction using a pluging?
example: https://addons.mozilla.org/en-US/firefox/addon/cors-everywhere/
I found this answer in another thread, and it looks like it may work on your end. Try:
$('#myframe').load(function(){
var iframe = $('#myframe').contents();
iframe.find(".importantContent").click(function(){
alert("test");
});
});
Also, you have $("#reco").contents() instead of $("#myframe").contents(), were you meaning to not use the iframe you have in this example?
I am attempting to create some functionality which will get and set the document of an iframe. I have been unsucessful at performing this with jquery.
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js" ></script></head>
<body>
<iframe sandbox="allow-same-origin allow-scripts" id='a' height="700" width="700" src="http://localhost:8181/website"></iframe>
<iframe sandbox="allow-same-origin allow-scripts" id='b' height="700" width="700" src="http://localhost:8181/website"></iframe>
</body>
</html>
When the page loads I need to navigate around in iframe a. At which point I will use javascript or jquery to take the doucment of A and replace B's document with it. Is this even possible? I don't necessarily need to use iframes if there are other options.
Scenario:
1. Page loads, iframe a & b are rendered
2. User navigates inside iframe A to different pages
**below this is functionality I cannot figure out
3. User clicks button to take DOM from iframe a and replace the DOM for Iframe b
This will essentially set the content of iframe b to be where the user had navigated in iframe a
There is a question about jquery and iframe.
The .contents() method can be used to get the content document of an iframe, if the iframe is on the same domain as the main page.
This should work:
var theHtmlStringToSet = $('#frameA').contents().find('body').html();
$('#frameB').contents().find('body').html(theHtmlStringToSet);
First of all, even if my question is about how to refresh <iframe>'s without flickering, any other suggestions that would solve my problem will be welcome.
Problem: I have a server that publishes a "main" html page. Meanwhile, it takes pictures (say, one per second) and saves them on the HDD. I want the picture to be displayed on the web page and be refreshed.
Solution found: I use a <iframe></iframe> scope where I put another page that contains only the image. Then this second page is refreshed periodically. So, the entire page is not refreshed, only the image frame. The problem is that this solution suffers from a flickering that occurs each time it is refreshed.
Here is the code of the main page (a little compacted):
<!DOCTYPE html><html><head><title>Blabla</title></head>
<body bgcolor="#404040"><h1>WELCOME!...</h1><hr>
<table border="0"><tr height="480"><td width="640">
<!-- RIGHT HERE! -->
<iframe src="image.html" width="640" height="480" frameborder="0"></iframe>
</td></tr></table>
</body></html>
and the second web page is like this:
<!DOCTYPE html><html><head>
<script type="text/javascript">
<!--
function f( t )
{
setTimeout( "location.reload( true );", t );
}
-->
</script>
</head>
<body bgcolor="#000000" onload="JavaScript:f( 1000 );">
<img src="../images/myimage.png" alt="Erreur" height="100%" width="100%"/>
</body>
</html>
I'm a beginner in JavaScript, so I don't pretend this piece of code is good, even passable. Feel free to give me some advice.
Now, is it possible to reload without flickering? I read that the flickers occur while the page is not entirely loaded. I also read about hidden frames switched on and off during load time, etc. But I cannot find a good solution.
Also, I know that some technologies like AJAX exist but I don't know a lot more about them. Feel free to suggest me to use them if it is necessary, I can learn quickly...
EDIT 1: Most Android browsers don't support relative image size like in my example. Use absolute pixel values in place.
Reloading an iframe will always flicker. But you don't need ajax for this either, just a timer and a trick to avoid caching:
<!DOCTYPE html><html><head><title>Blabla</title></head>
<body bgcolor="#404040"><h1>WELCOME!...</h1><hr>
<table border="0"><tr height="480"><td width="640">
<div>
<img id="theimg" src="../images/myimage.png" alt="Erreur" height="100%" width="100%"/>
</div>
</td></tr></table>
<script type="text/javascript">
var theimg = document.getElementById("theimg");
var theurl = "../images/myimage.png";
setInterval(function() {
theimg.src = theurl + '?t=' + new Date().getTime();
}, 1000);
</script>
</body></html>