Develop Reference

iOS: inserting iFrame with SRC inside the page immediately opens the url in Safari

I have quite a strange problem. This is happening inside a Cordova (hybrid HTML) app, but only on iOS.
I have my HTML page with some content already there, and that's ok.
In a second moment, I'm retrieving some HTML from a remote page and I insert this HTML inside my main HTML page. If there's an iFrame with an SRC attribute specified, the system immediately opens that SRC inside safari/a specific app, but I just want to insert the content as a normal iFrame!
Example. If I retrieve this HTML:
<iframe src="https://www.youtube.com/watch?v=dQw4w9WgXcQ">
and let's say that I save this HTML element inside a variable foo. As soon as i do:
document.getElementById("XXX").appendChild(foo);
iOS immediately opens the youtube app. No user interaction, no triggers, nothing. Just by inserting the iFrame in the page.
The same happens with any other SRC specified.
I tried to replace the "src" attribute with a fake one, like "data-src", insert the iFrame in the page and in a second moment put back the original SRC. As soon as I do that, the same stuff happens.
Do you have any idea on what is causing this and how to implement a workaround? On Android everything's fine.
P.S.: I'm using wkwebview, if that matters.

I did it! Damn, if that was a stupid mistake!
In my config.xml I forgot to put this
<allow-navigation href="*" />
This was blocking everything from being played inside my webview, and as a backup option, iOS was trying to open the iframe URL on another browser (such as Safari).
Thank you Erik anyway! I guess I wasted 50 bounty points :(

getElementsByClassName from embedded web

So,I embedded a website on my little project and I want a specific button on that embedded website to be clicked. I tried the
function anyFunction() {
var x = document.getElementsByClassName("example");
x[1].click();
}
<embed src="embeddedwebsite" style="width:100%;height:100%;"/>
and i got nothing. Maybe it was because the button i want to click is from an embedded website.
Is there any way to fixing the code.
Thanks

The correct element for including another webpage is <iframe> so start by using that:
<iframe src="embeddedwebsite"></iframe>
You can then access content in it via:
document.querySelector('iframe').contentWindow.document.getElementsByClassName("example");
… providing it is on the same origin.
Cross-origin frame access has limitations which you can work around via postMessage.

How to let user only view pdf file in web page and not to download? [duplicate]

I'm going to write a site that lets users to view pdf files but I don't want them to save the files to their own hard drive due to the copy right law. I'm researching how to view it by using PHP, but I have no idea how to disable user not to download the files.
Actually, I want to use JavaScript to disable this action, but I get suggestions from other people not to do so because it's annoying to user.
So any suggestion or help would be very much appreciated.

USE CSS opacity: 1.0 with a <div> positioned over your content...
You could output the pdf using <object> or <iframe>, then place a with absolute position and use z-index to cover your pdf. Use the css opacity: 1.0.
Now when users try to click or copy, they get nothing because they are really clicking on a blank <div>!!!!
Its a hack, but it works! The user will be able to read the content, they could take a screen shot, but they won't be able to actually copy the text and paste it anywhere.

Method 01
Implementing that useing Google books
<iframe frameborder="0" scrolling="no" style="border:0px" src="https://books.google.com.kh/books?id=e5MkzETNcsgC&lpg=PP1&dq=typography&pg=PA11&output=embed" width="500" height=500>
</iframe>
In above image it shows Embed that will be the code. And Download or Print option is not available on this. Google dosc can prevent download but its allow to Save to Drive option. Then in drive i can download it. But Google books not allow any of that.
in view
Method 02
Using Google Drive
Right click on pdf and goto Share(below image)
Then go to Advanced option in left bottom
Tick Both check boxes. After copy embed link and paste it to your src. No download and Save drive option is not allowed
Note: Method 01 and Method 02 is Tested

You can't prevent your visitors from downloading, copying or scrapping anything you're outputting to their browsers. If they can view it they can always screenshot it. Which brings in the optimal solution to your problem: Simply offer image copies of your documents instead of actual PDF files. You can convert / mass convert PDF files to JPEG easily with Photoshop.

I hope I am not very late to reply. But here's is something you can do to prevent the users. Use iFrame to display your PDF and make sure that you are displaying using Google. I used the following code :
<iframe src="http://docs.google.com/gview?url=http://www.tutorialspoint.com/php/php_tutorial.pdf&embedded=true" style="width:600px; height:500px;" frameborder="0">
</iframe>
Here you can simply change the url=http://www.tutorialspoint.com/php/php_tutorial.pdf and replace it by your own URL where you kept your PDF.

Try this one:
<iframe src="test1.pdf" scrolling="no" frameborder="0" height="100%" width="100%" style="position:absolute; clip:rect (190px,1100px,800px,250px);">

try this
<embed src="http://URL_TO_PDF.com/pdf.pdf#toolbar=0&navpanes=0&scrollbar=0" width="500" height="500">

Implementing Google Maps API Key in javascript

I am desperatly trying to put online a map I created through a Javascript code on a html page (I'm not a professional developper, and I am particulary ignorant in javascript). As long as I keep the html file local, everything runs ok, but as soon as I put it online, the map won't show, and I got a message concerning the missing key.
So I got a key, but my problem is to find how it works. My map is generated by the following instruction :
map = new google.maps.Map(document.getElementById("map"), options);
I tried to add this script :
script src="https://maps.googleapis.com/maps/api/js?key=#####&callback=initMap" async defer
But all that happens is several more errors, and no map visible.
Could anyone help me ? Thanks in advance

Instead, you should use an iframe that you get on the google maps site. Example:
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d100994.00356082054!2d-121.9805740058651!3d37.71820818113972!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x808fe65cd6892231%3A0x3b327c848ef64057!2sDublin%2C+CA+94568!5e0!3m2!1sen!2sus!4v1480970198759" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>

Go to credentials page in google developer console then at the top you will see Domain Verification tab click on that tab, then click on the button Add domain in order to add the domain from where your site is being loaded.
If you do this you will not need API key. Thanks to this Google can track your requests.
Important Note
I'm not sure whether this will be the case for you but please note that once you will add a verified domain make sure that the previously generated your key is not being used for the Google Map's web services like APIs otherwise that APIs will return error after adding domain.

Issue with Facebook Activity Feed plugin on my website

I have used face book recent activity script in my website,But it does not show anything in side the box where the script is placed,even I have feeds from my friend list.
Here is the code what I have used :
<iframe src="http://www.facebook.com/plugins/activity.php?site=http%3A%2F%2Fintegration.mytaste.com.au%2F&width=300&height=300&header=true&colorscheme=light&font&border_color&recommendations=false"
scrolling="no"
frameborder="0"
style="border:none; overflow:hidden; width:300px; height:300px;"
allowTransparency="true">
</iframe>
you can just test it from here itself
http://developers.facebook.com/docs/reference/plugins/activity/
use this url http://integration.mytaste.com.au/ for domain field in the box.

It doesn't look like you have any Open Graph tags on any of the pages on your site. Check out the Open Graph Protocol documentation and add at least the og:title, og:type, og:url, and og:image meta tags to your pages to have them start showing up in the Activity Feed plugin. You can use the URL Linter to ensure your pages are getting scraped correctly by us.
P.S. The auto-posting to a user's wall when they click your Like button is sort of misleading and could be called out as such by our Policy team (check out the policies). I would suggest you just use the Like Button instead. It has the added benefit of giving social context even if the user isn't logged in to your site. If you need to detect when a user has liked something on your site, you can subscribe to the "edge.create" event using FB.Event.subscribe in the Javascript SDK.