I need to develop a widget for embedding my contents on 3rd party HTMLs.
I searched several pages about this topic, and understood pros/cons of using iframe and javascript but still remain one question.
I mean:
using iframe is giving 3rd party users a iframe tag, e.g. <iframe src="https://sample.com/widget.html</iframe>
using javascript is giving 3rd party users a script tag, e.g. <script src="https://sample.com/widget.js</script>
A page explains about using Js, but their Js code just generates iframe and insert it into parent's node and set contents to iframe.
e.g.
var iframe = document.createElement('iframe');
iframe.src = 'https://sample.com/widget.html
// insert iframe into parent node
// or set content into document
var doc = iframe.contentWindow.document;
doc.open();
doc.write('content');
doc.close();
My question is how differences between just using iframe and using iframe that Js generated and inserted?
My understanding is that iframe via Js is better if I want to change iframe's behavior/appearance.
But these are almost same behavior if Js code just inserting iframe.
Is it correct?
have you explore Zoid? It is a boilerplate to help you design an embeddable widget script with security as its main feature. Check this article
Inserting the iframe directly as embed code is similar to inserting the js code to load and render iframe. There is no difference. But there are differences when we use our embed as iframe tag as compared to when we use script tag.
Related
I've been playing around with DOM and BOM in JavaScript through Google Chrome's console trying to change locally input values, colors, etc...on different websites. I stumbled on a website that used iframe tags for it's form. I tried to change the value of the inputs located inside the iframe but couldn't get it done. My understanding is iframe incorporates a separate webpage inside of the one currently viewed.
My question is simple how do I access the tags inside of the iframe?
Things I tried so far:
document.getElementById("")
document.getElementsByTagNames("")
window.frames
window.parent
So an iframe is an inline frame, and what that inline frame contains is the building blocks to build a website, or display someone elses website. If you know DOM traversal you would basically have to select that iframe, and then go to select the DOM objects within that iframe from there to manipulate those.
iframe = $('#myId');
iframe.contents().find('htmlelements');
Here is a sandbox environment to begin understanding the traversal portion:
http://jsfiddle.net/fDFca/
I'm trying to run a script inside an AMP page.
There is no page I need to load within the src attribute; my script should inject an <iframe> with the correct src (it is unknown at first load, only received in response to a request made by my script).
Is this possible in AMP?
Disclaimer: I'm open to different approaches to accomplish the same result - injecting an <iframe> with an src attribute within an AMP page.
Thank you
The AMP page cannot contain any javascript in the first place, so this won't work: https://www.ampproject.org/docs/reference/spec.html#html-tags
The only way to achieve your goal is to:
create an iframe with a src attribute pointing to an HTML page you control
in that page load the Javascript that does the work. You can see a similar approach in this example: https://ampbyexample.com/advanced/how_to_create_interactive_amp_pages/
As stated by #ade you can pull this off. Think about it like this.....
You'll have an HTTPS resource that you can hit that will return the blank iframe along with all of the JS code you need to populate the iframe. So basically an entirely functioning page that will be returned to the AMP-IFRAME.
Calling this from the src attribute of an AMP-IFRAME tag will then pull in your page that includes a blank iframe and all of the scripting needed to populate it or manipulate it. So all of your custom code is happening within the AMP-IFRAME tag but all of it's resources live within the embedded iframe tag that the AMP-IFRAME tag pulls in and renders.
We have a custom video player that works very similar to what you are talking about. I created a template that can be hit via HTTPS that returns a page that iframes our video as well as includes all the scripts to play it and manipulate it. It's all contained in a nice neat little package and the only thing required to use the AMP-IFRAME is the script that extends it. Check out all the AMP-FRAME documentation here.
Hope this helps.
Currently we are trying to access the HTML of (with javascript) dynamically generated html-elements (e.g. to get the url of an image). If the html-elements are generated with javascript only - their is no problem. Just extracting the image url with javascript by accessing the DOM elements. But now we have trouble with an iframe.
This is the situation at the moment:
We include external script-file (www.test.com/script.js) to create a gallery on our website
The script.js generates a new iframe in our website (document.write('iframe code here')); referencing to www.test.com/iframe.html)
The iframe.html contains javascript-code again to generate the gallery by creating serveral dom-elements (divs, imgs, a, p,....)
Now we need to read the src-attribute of these images. With the debugging tool of the browser, it is no problem. Without the iframe, it's also no problem. But with the iframe, because of the cross domain policy of the browsers we can not access the html of the iframe.html with javascript.
One possible solution was to try to get the src of the iframe tag with javascript, call a server-side script to get the html content of the src-url and run the content via eval()-function on the client again.
I hope you have other better ways to solve that.
It is not clear from your question, but if the iframe is being served by your app, you can use postMessage in order to communicate between the iframe and its parent window.
This part of a script works fine on a normal page:
<script>
$(function() {
$(".counter").countimator();
});
</script>
But when that same page is loaded in an iframe on a page on another domain, it doesn't work.
Is there a way to get this selector/code work when the page is loaded within an iframe? I want to give people a iframe code that they can use on their personal websites to get the content of my page on their website.
Edit
I published the basic code on http://joomlaground.com/iframe_test/
The http://joomlaground.com/iframe_test/clock.php runs standalone like it should.
Then I created a very basic iframe page iframe.php which iframe the clock.php. However then the clock.php is not counting any more.
How can I fix this?
If '.counter' element is outside of the iframe you're running the internal iframe script has no access to this element as the current document and iframe are separate documents. If you'll have any questions don't hesitate to ask below.
When you move this script in an iframe then it means you are running your script in a new window.
Now in new window you are trying to access some library function:
$(".counter").countimator();
That can only be done if you have that library included in the source of that iframe.
I have published a Google Document that contains some links. I have used the iframe code to embed it on a webpage. However, when clicking on its links, the iframe is being replaced by the link's target url.
I have tried to dynamically download the frame and replace a div placeholder (ajax + jquery), but it's not an elegant solution as there is basically an html document embedded on the parent html document. ( I have other problems with this approach)
I have also tried using the tag:
<base target="_blank">
but it doesn't work.
Another failed attempt was by using the onload attribute of the iframe element.
Then with jQuery I was trying to modify the target of all the a elements.
Any help? Thanks in advance!
Duplicate question. Workaround, An old one, On SO
Force iFrame links (in embedded Google Doc) to open in new window
Google docs requests for an answer Here