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.
Related
Fellow Stackers, my intention is to embed a private Google Doc into a web page using an iframe, so that its contents only load for users who have been expressly shared on the Google Doc.
To do so, I'd like to use a link along these lines (https://docs.google.com/feeds/download/documents/Export?exportFormat=html&format=html&id=[MyGoogleDocID]) to export the Google Doc as .html. Then, god willing, use JavaScript to render the exported .html file inside an iframe.
I'm new to JavaScript, but I've been using the following code (graciously recommended by John) to force embedded hyperlinks within an iframe to open in a new window...so the task of loading a downloaded .html file seems within the realm of JavaScript's power:
<iframe id="myframe" srcdoc="" style="width: 600px; height: 500px; border: 0" frameborder="0"></iframe>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(function() {
$.get("https://docs.google.com/document/d/[MyGoogleSpreadsheetID]/pub?embedded=true", function(html) {
$("#myframe").attr("srcdoc", html);
setTimeout(function() {
$("#myframe").contents().find('a[href^="http://"]').attr("target", "_blank");
$("#myframe").contents().find('a[href^="https://"]').attr("target", "_blank");
}, 1000);
});
});
</script>
As always, any insight would be greatly appreciated!
edit: Google has an option for embedding forms (but not the other variety of documents):
Go to File > Embed Form.
Copy & Paste the embed code (it's already an iframe).
Paste into your HTML document.
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 want to use Jquery or javascript to get the raw content (mean everycharacter) of an Iframe. It sounds simple but I'm still struggling with finding the right way for it.
For now it is only a XML content in the Iframe though.
Here the code:
$(function() {
var xmlContent = $("#CFrame").contents().find("*").text();
// The magic
$('#SResult').xslt({xml: xmlContent, xslUrl: 'stylesheet/designSS.xsl'});
});
The html page
<form id="searchForm" method="GET" target="ContentFrame" action="http://125.235.8.210:380/search" onSubmit="processContent()">
.....
</form>
</div>
<div id="SResult">
</div>
<iframe id="CFrame" name="ContentFrame" frameborder="1" height="2000px" width="1000px" scrolling="no" src="stylesheet/test.xml"></iframe>
</body>
Thanks,
Disclaimer: I'll answer your question regardless of whether it is actually an elegant solution to your problem. Joseph seems to take that as the question. I would say he is probably right to do so.
It won't work trying to get the frame using mimetype text/xml. The browser will proceed and 'translate' the XML into HTML. That's why it doesn't sound so simple. This way it is actually impossible.
I present you with a simple work-around for this problem.
<html>
<head>
<script>
function getXmlContents() {
/*
Note: Because of security reasons, the contents of a document can be accessed from another document only if the two documents are located in the same domain.
http://www.w3schools.com/jsref/prop_frame_contentdocument.asp
*/
var iframeDocument = document.getElementById('greetingFrame').contentDocument;
if (iframeDocument == null)
return undefined;
var xmlContainer = iframeDocument.getElementById('xmlContainer');
if (xmlContainer == null)
return undefined;
return xmlContainer.innerText == null ? xmlContainer.textContent : xmlContainer.innerText;
};
</script>
</head>
<body>
<iframe id="greetingFrame" src="helloworld.html" onload="alert(getXmlContents())">
</iframe>
</body>
</html>
The contents of the XML are wrapped inside an HTML (helloworld.html):
<html>
<body>
<script id="xmlContainer" type="text/xml">
<?xml version="1.0" encoding="UTF-8"?>
<title>
Hello world
</title>
</script>
</body>
</html>
I've successfully tested this in Chrome, Firefox and IE.
Of course you would have to wrap your XML documents inside a HTML script tag as indicated above. The XML can also be wrapped in a different tag, if you'd like it rendered for example, but you'd have to encode the XML using html encoding. This needs to be done on the server-side. A very simple (php/ruby/python/etc) script would suffice.
If your XML resides on your domain, you are better off with AJAX, especially using the jQuery library, which parses it for you and make it ready for immediate manipulations.
If it does not live on your domain, then you can't access it via AJAX unless the remote server and your client's browser both support CORS.
You have options though:
If the remote server's API supports JSONP, use it instead of XML. Then you can use jQuery to retrieve JSONP data or roll your own script loader.
Or use your server to proxy the XML for you. Servers are not restricted to the Same Origin Policy. Create an API on your server that relays your form data to the remote server and retrieve the remote page - all as if your server was the browser. Then forward the results back to you.
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.
I'm looking to do a short term hack on a site. The site is a ASP.NET site with a master page. The body tag is in the master page. I'd like to specify which ID should be in the body tag from within various content pages. What I don't know is if you can have this type of access to the body tag when your JS is within the body tag. For various reasons, I'd like to try to accomplish this in JS, not .NET.
Any tips?
Rephrasing for clarity:
I would like to use JavaScript to specify a body ID from within the body tag of a site. For example:
<body id="MyID">
JS to change MyID to another name
</body>
Put this in the Page_Load of any ContentPage...
string JS = "document.body.id = 'WhateverID';";
ClientScript.RegisterStartupScript(this.GetType(), "BodyID", JS, true);