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.
Related
I'm building electron app that allows extendable modules. I'm getting require not defined when i call it from loaded html script. How can i do this or what approach can i take to deal with this?
I've html loaded into iframe on click. Html has script tag with what module has to do.
mainWindow.html
<iframe id="frame"></iframe>
<script>
var moduleOrange = document.querySelector('.module-orange')
moduleOrange.addEventListener('click', addScript);
function addScript(e) {
var frame = document.getElementById('frame');
frame.setAttribute("src", "orange.html");
}
</script>
orange.html
<script>
require('puppeteer')
</script>
I want included html script to have separate functionality, without need of calling every method from mainWindow.html.
I'm trying to implement a simple play button for youtube video on a WordPress page.
<a id="play-video" href="#">Play Video</a><br />
<iframe id="video" width="420" height="315" src="//www.youtube.com/embed/9B7te184ZpQ?rel=0" frameborder="0" allowfullscreen></iframe>
<script type="text/javascript">
jQuery('#play-video').on('click', function(ev) {
jQuery("#video")[0].src += "&autoplay=1";
ev.preventDefault();
});
</script>
Original code pen I found: here
It works fine on Codepen and js fiddle but has no effect on the WP page.
Am I missing something fundamental?
Any help is greatly appreciated
Almost guaranteed you are not loading jQuery in this project, and your code that you are adding relies on jQuery.
In your functions.php file (in your theme folder), add the below code (be sure it is between php open / close tags, not before / after them. php open tag look like <?php and closing tag ?>):
add_action('wp_enqueue_scripts', 'enqueue_my_jquery');
function enqueue_my_jquery() {
wp_enqueue_script('jquery');
}
You may find other resources that show you how to add jQuery directly to the header.php file - do not do that. it can (and will) cause a variety of problems.
<script type="text/javascript">
document.body.addEventListener('load', function() {
//jQuery should almost definitely be accessible in this scope
var $ = jQuery;
$('#play-video').on('click', function(ev) {
$('#video')[0].src += "&autoplay=1";
ev.preventDefault();
});
});
</script>
This is what I would consider a hacky way of adding javascript to Wordpress.
I would recommend always having your scripts in separate files and utilizing Wordpress's PHP function wp_enqueue_script in order to ensure script dependency order.
I found this at: https://codex.wordpress.org/Using_Javascript
Under the JavaScript in Posts section:
To include Javascript inside a post, you need to combine the call to
the script file with the call to the JavaScript itself.
<script type="text/javascript" src="/scripts/updatepage.js"></script>
<script type="text/javascript">
<!--
updatepage();
//--></script>
I needed to put the script into a .js file and call for that file as well as the script itself.
Thanks so much for the help!
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 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 have the following code for viewing my webcam directly via a publicly accessible link.
<!DOCTYPE html>
<html>
<head>
<title>webRTC Test</title>
</head>
<script type = "text/javascript">
function init()
{
if(navigator.webkitGetUserMedia)
{
navigator.webkitGetUserMedia({video:true}, onSuccess, onFail);
}
else
{
alert('webRTC not available');
}
}
function onSuccess(stream)
{
document.getElementById('camFeed').src = webkitURL.createObjectURL(stream);
var src = document.getElementById('camFeed').getAttribute('src');
document.getElementById('streamLink').href = src;
}
function onFail()
{
alert('could not connect stream');
}
</script>
<body onload = "init();" style="background-color:#ababab;">
<div style="width:352px; height:625px; margin:0 auto; background-color:#fff;">
<div>
<video id ="camFeed" width="320" height="240" autoplay>
</video>
</div>
<div>
<canvas id="photo" width="320" height="240">
</canvas>
</div>
<div style="margin: 0 auto; width:82px;">
<a id="streamLink">Visit Stream</a>
</div>
</div>
</div>
</body>
</html>
The link generated in the anchor tag is something like:
blob:http%3A//sitename.com/7989e43a-334r-4319-b9c5-9dfu00b00cd0
And upon visiting chrome tells me "Oops! This link appears to be broken."
Help appreciated!
The File API spec defines URL.createObjectURL. There are a couple of sections that make what you're trying to do impossible in a browser that follows the spec.
Section 11.5 says:
The origin of a Blob URI must be the origin of the script that called URL.createObjectURL. Blob URIs must only be valid within this origin.
In other words, the URIs returned by createObjectURL can only be used within the context of the website that created them (see RFC6454: The Web Origin Concept for a more precise definition of what the HTML specs mean by “origin”). You can't visit a URL returned by createObjectURL directly.
Section 11.6 says:
This specification adds an additional unloading document cleanup step: user agents must revoke any Blob URIs created with URL.createObjectURL from within that document.
This means that even if you could visit the URL directly, as soon you you leave the page that called createObjectURL the URL that was created ceases to exist.
You must ensure that you’re using/testing your code at HTTP or HTTPs protocols --- because URL.createObjectURL has some issues at file:// protocol --- and it can’t be able to generate right BLOB for your video while using file:// ---- !!!
Your code won't work on localhost or your machine alone.
All you need is, upload this HTML document on the Net(just in case you are wondering on how to get Hosting for yourself, then try checkout Dropbox, you can upload your HTML page publicly and get access via Public Link for free or try some other product or simply get hosting for yourself). As you can see that this example http://www.html5rocks.com/en/tutorials/getusermedia/intro/ works perfectly in chrome, though the code that it is utilising is the same as yours. I hope this solution is of some help to your and others searching for an answer to this bug.
Also, you can then use an iframe to get access to the video element to perform operations on it.