Here's a situation. My customers would be having their own web pages. On that page they might have an iFrame in which they can show a page located on my server. Outside the iFrame they would have simple buttons, which when clicked should execute javascript functions in iFrame.
So basically the code of customer's web page on customer's domain would be something like this
<input type="button" value="Say Hi" id="TestButton">
<iframe src="myserver.com/some_html_page.htm" width="800" height="550"></iframe>
And code of myserver.com/some_html_page.htm would be
$("#TestButton").click(function(){
alert("Hi");
});
I did my reserach and I am aware of the Browser Security issues, but I want to know is there any way to handle this, may be with json or something ?
As you can already tell (given the parent and child are on different domains), you definitely cannot reach up from the child iFrame into the parent to listen for events.
One way around this is to pass messages between the pages. This will require your clients to include additional javascript in their page as well as the iFrame which points to your server. This is supported in native javascript with postMessage, but including the library #Mark Price suggests will make your life much easier.
So here goes an example:
Clients Page:
...
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.postMessage.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#TestButton").click(function(){
jQuery.postMessage("say_hi", "myserver.com/some_html_page.htm");
});
});
</script>
</head>
<input type="button" value="Say Hi" id="TestButton">
<iframe src="myserver.com/some_html_page.htm"></iframe>
Code on myserver.com/some_html_page.htm:
...
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.postMessage.min.js"></script>
<script type="text/javascript">
// you will need to set this dynamically, perhaps by having your
// clients pass it into the URL of the iFrame,
// e.g. <iframe src="myserver.com/some_html_page.htm?source_url=..
var source_origin = "clients_page.com/index.html";
var messageHandler = function (data) {
// process 'data' to decide what action to take...
alert("Hi");
};
$.receiveMessage(messageHandler, source_origin);
</script>
</head>
Probably it would be nice to bundle the client code up into a single library that they could include, so your clients aren't burdened with writing their own javascript.
As a caveat, I wrote this code off the top of my head and it is likely be rife with typos. I have used this library before to accomplish similar goals, and I hope this answer is a useful jumping off point for you (along with the plugin documentation).
Let me know if I can clarify anything, and best of luck! :)
You could try this jquery plugin from Ben Alman, providing you can have the plugin running on both yours, and your clients servers - see the examples for ways to execute js cross domain :
http://benalman.com/code/projects/jquery-postmessage/docs/files/jquery-ba-postmessage-js.html
Lets consider if you have a function called test() which loads under Iframe, then you can access that test() function as below
document.getElementsByName("name of iframe")[0].contentWindow.functionName()
e.g.
document.getElementsByName("iframe1")[0].contentWindow.test()
One of the common patterns of doing cross-domain requests, is using JSONP.
Related
As my website has only one page, and the index.html was getting really long and impossible to read. So I decided to put each section in a different HTML file and use jQuery to included it.
I used jQuery's include in the way as it has been mentioned here to include a external HTML file but apparently it doesn't work for my website. I really don't know what is the problem.
Here is the link of my workspace.
Here is what I am doing in index.html file to include other sections
<script src="./js/jquery-1.11.1.min"></script>
<script>
$(function() {
$("#includedContent").load("./page1.html");
});
</script>
<script>
$(function() {
$("#includedContent").load("./page2.html");
});
</script>
<script>
$(function() {
$("#includedContent").load("./page3.html");
});
</script>
<script>
$(function() {
$("#includedContent").load("./page4.html");
});
</script>
<script>
$(function() {
$("#includedContent").load("./page5.html");
});
</script>
<script>
$(function() {
$("#includedContent").load("./page6.html");
});
</script>
<script>
$(function() {
$("#includedContent").load("./page7.html");
});
</script>
I also used this method to make sure the file is accessible and everything was fine. So the problem is not the accessibility of the files
You are overwriting the contents of #includedContent seven times (see documentation of jQuery.load). With AJAX, there is no guarantee which request will complete first so you will end up with random page content inside the container.
The solution is to create containers for each page and load each page inside its dedicated container, something like this:
<div id="includedContent">
<div class="page1"></div>
<div class="page2"></div>
<div class="page3"></div>
</div>
$(document).ready(function() {
$("#includedContent .page1").load("page1.html");
$("#includedContent .page2").load("page2.html");
$("#includedContent .page3").load("page3.html");
});
NB: Having said all that, I do not understand how AJAX solves the problem of the page being too long/impossible to read.
There are several things that look odd to me:
all your load functions run at document ready, which is weird while having all the same target. load replaces (not adds) the content of the selected element with what is being loaded, you probably are trying to add all the html contents, but your current setup would actually just load page7.html into #includedContent
the paths look strange to me, i guess ./ may cause errors, try to leave out ./ everywhere.
rather than loading an entire html page, you might just want to load a piece of that file (i dont know how pageX.html looks), for example you would not want to load the <html> node entirely, rather the content only: .load('page1.html #content')
are you including jquery correctly? there is no .js in your inclusion
I have recently discovered the new trend of including all .js script at the end of the page.
From what i have read so far seems pretty ok and doable with an exception.
The way I am working is using a template like:
<html>
<head>
<!-- tags, css's -->
</head>
<body>
<!-- header -->
<div id="wrapper">
<?php
include('pages/'.$page.'.php');
?>
</div>
<!-- footer -->
<!-- include all .js -->
</body>
</html>
Now, if I want to use this example on my page http://www.bootply.com/71401 , I would have to add the folowing code under my jquery inclusion.
$('.thumbnail').click(function(){
$('.modal-body').empty();
var title = $(this).parent('a').attr("title");
$('.modal-title').html(title);
$($(this).parents('div').html()).appendTo('.modal-body');
$('#myModal').modal({show:true});
});
But that would mean I either use that in every page - even if I do not have use for it, either generate it with php in the $page.'php' file and echoing it in the template file, after the js inclusion.
I am sure though, better methods exist and I don't want to start off by using a maybe compromised one.
Thanks!
Please avoid using inline scripts as they are not good maintainable and prevent the browser from caching them. Swap your inline scripts in external files.
Fore example you could put all your JavaScript in one file an check the presence of a specific element before initialize the whole code. E.g.:
$(document).ready(function(){
if($('.thumbnail').length) {
// your thumbnail code
}
});
A better way to execute "page specific" JavaScript is to work with a modular library like requirejs. You can modularize your scripts depending on their functionality (like thumbnails.js, gallery.js etc.) and then load the necessary script(s) depending e.g. on the existence of an element:
if($('.thumbnail').length) {
require(['ThumbnailScript'], function(ThumbnailScript){
ThumbnailScript.init();
});
}
The best way you can go is create a separate file for this code.
Let's name it app.js. Now you can include it under the jQuery inclusion.
<script type="text/javascript" src="app.js"></script>
This will prevent code repeat.
One more thing, pull all the code in $(document).ready(). Here is an example. So your app.js file will look like this:
$(document).ready(function(){
$('.thumbnail').click(function(){
$('.modal-body').empty();
var title = $(this).parent('a').attr("title");
$('.modal-title').html(title);
$($(this).parents('div').html()).appendTo('.modal-body');
$('#myModal').modal({show:true});
});
})
I read Google Chrome Extensions Developer's Guide carefully, it told me to save options in localStorage, but how is content_scripts able to get access to these options?
Sample:
I want to write a script for a couple of domains, and this script should share some options on these domains.
content_scripts:
//Runs on several domains
(function(){
var option=getOptions();
//Get options which have been set in options.html
if(option){
doSome();
}
})
option_page:
<html>
<head>
<title>My Test Extension Options</title>
</head>
<body>
option: <input id="option" type="text" /><br />
<input id="save" type="submit" /><br />
<span id="tips">option saved</span>
<script type="text/javascript">
(function(){
var input=document.getElementById('option');
var save=document.getElementById('save');
var tips=document.getElementById('tips');
input.value=localStorage.option||'';
// Here localStorage.option is what I want content_scripts to get.
function hideTips(){
tips.style.visibility='hidden';
}
function saveHandler(){
localStorage.option=input.value||'';
tips.style.visibility='visible';
setTimeout(hideTips,1000);
}
hideTips();
save.addEventListener('click',saveHandler);
})();
</script>
</body>
</html>
I would think you could use the chrome.extensions.* API to create a line of communication to a background page that is running under your extension ID, thus giving you local storage.
I think this is possible because the Content Script docs specify that the chrome.extensions* API's are available to content scripts. But I have never tried this.
You would then just have to send messages from the background page to the content script when a connection is made. You could even send one message with all the settings in a literal object.
Here is an example of creating two way communication I wrote about earlier. You could implement this or create a custom solution but I think this is how you would achieve what you are looking for.
I am helping out with a website and we are having issues with page load time because of the ads that sometimes take a few seconds to load. Since the ads are called using < script> tags the browser stops parsing the page until the ads are fully loaded. What we are looking for is a way to load the ads from the client side so that the page can be displayed entirely and then the ads will start loading, thus greatly improving user experience.
I have tried a lot of things to get this to work but no solution actually shows the ads. You can see the site at http://magic.tcgplayer.com/. There is one ad as a banner, at the top of the page, and another one in the right "column". Both ads are loaded using < script> tags. I have tried to load using lazy loading javascripts but they didn't work. I have tried using the writeCapture.js (an excellent script by the way) but the ads don't load. I looked at the bezen.org and labjs.com solutions but I'm not sure how to apply the ideas from those resources. Also note that the ad script is on a remote server and cannot be copied to our server.
Any help is greatly appreciated.
I try to find some way to async load google ad too, and I find it.
A big site douban use iframe to hold the js and async load iframe.
This is the js code:
function google_ad() {
function createIframe() {
var ad_frame = document.createElement("iframe");
ad_frame.src = "/js/google_ad.htm";
ad_frame.id = "google_ad_frame";
ad_frame.scrolling = "no";
ad_frame.width = "260px";
ad_frame.height = "260px";
document.getElementById("google_ad").appendChild(ad_frame);
};
if (window.addEventListener) {
window.addEventListener("load", createIframe, false);
} else if (window.attachEvent) {
window.attachEvent("onload", createIframe);
} else {
window.onload = createIframe;
}
}
And this is the code for iframe, which is from google adsense:
<script type='text/javascript' src='http://partner.googleadservices.com/gampad/google_service.js'>
</script>
<script type='text/javascript'>
GS_googleAddAdSenseService("ca-pub-1281485759256908");
GS_googleEnableAllServices();
</script>
<script type='text/javascript'>
GA_googleAddSlot("ca-pub-1281485759256908", "ad_right");
</script>
<script type='text/javascript'>
GA_googleFetchAds();
</script>
<script type="text/javascript">
GA_googleFillSlot("ad_right");
</script>
So, I just use this:
<div id="google_ad" style="margin-top:20px;text-align:center;border:solid 17px #FFFFFF;">
<script type="text/javascript">google_ad();</script>
</div>
And, it loads the frame.
Put the ad in an iframe. The iframe should load the JavaScript with document.write().
Since things evolved it is now possible to use the defer or async attribute.
I load my scripts with async but defer is safer for older browsers.
See W3 Schools which contains details for both async and defer.
I have some code that someone wants to put on their site. Here is the code i received from them:
<script language="JavaScript" src="http://dm4.contactatonce.com/scripts/PopIn.js" type="text/javascript"></script>
<script language="JavaScript" src="http://dm4.contactatonce.com/PopInGenerator.aspx?MerchantId=44542&ProviderId=3176&PlacementId=0" type="text/javascript"> </script>
<script language="JavaScript">
popIn();
</script>
The way this particular site is set up I cannot pick and choose which page to display it on - it has to go in the <head> of every page. The problem is that i want it to NOT show up on only one particular page. THe page name is /CreditApplication.aspx. I know i need to add an if statement to check the URL but i'm not quite sure how to accomplish that with this particular code as it uses external javascript files.
Any help would be great appreciated!
Thanks!
EDIT: Thanks for all the answers! Let me clarify one thing: the reason i need this is because the page the code is going on is a secured (https) page. These js scripts are not using secured links so in some browsers it gives you an error saying "some content on this page may not be secure" or whatever. I am trying to make sure these don't run on only this page. That's why i need the conditional statement on them. Hope that helps.
How about
if (! /CreditApplication\.aspx$/.test(window.location.href) {
popIn();
}
Edit the regex as needed if the page can accept parameters.
Try this:
<script>
window.location.pathname !== '/CreditApplication.aspx' &&
document.write(unescape('%3Cscript src="http%3A//dm4.contactatonce.com/PopInGenerator.aspx%3FMerchantId%3D44542%26ProviderId%3D3176%26PlacementId%3D0%22%20type%3D%22text/javascript')) &&
document.write(unescape('%3Cscript src="http%3A//dm4.contactatonce.com/scripts/PopIn.js"%3E%3C/script%3E'));
</script>
I'm not completely sure I'm following your question, but if I am here is how to get started:
if(window.location.href.indexOf("/CreditApplication.aspx") === -1) {
popIn();
}