I have a real .php page like this http://hiteachers.com/soccer_parse.php?id=5. I want to add it into a blogger.com new page (**not a new blog post, or new HTML widget **, and I've got this successfully.
https://tranbongda.blogspot.com/p/function-myfunction-window.html
I used the code like this:
<script>
var Window;
// Function that open the new Window
function windowOpen() {
Window = window.open("http://hiteachers.com/soccer_parse.php?id=5",
"_blank", "width=400, height=450");
}
// function that Closes the open Window
function windowClose() {
Window.close();
}
</script>
<button onclick="windowOpen()">Open page</button>
<button onclick="windowClose()">Close page</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script>
$(document).ready(function()
$("button").click(function(){
$("#div1").load("http://hiteachers.com/soccer_parse.php?id=5");
});
});
</script>
My expectation is that I'd like the blogger page to load the original content of the .php page immediately when the visitor visits the blogger.com page (https://tranbongda.blogspot.com/p/function-myfunction-window.html) without clicking on any button.
I have thought of creating iframe by using this:
<iframe name="Framename" src="http://hiteachers.com/soccer_parse.php?id=5" width="550" height="550" frameborder="0" scrolling="yes" style="width: 100%;"> </iframe>
But the blogger.com page does not accept it, and returns the error message like this:
This page contains HTTP resources which may cause mixed content affecting security and user experience if blog is viewed over HTTPS.
Then I moved to try this <object width="500" height="300" type="text/html" data="http://hiteachers.com/soccer_parse.php?id=5"></object> as per some bloggers' suggestions, but I still failed.
Some other bloggers suggested to use AJAX, which is very new to me.
So, is there any way to parse the provided .php page content and add it to the blogspot.com/blogger.com new page without showing the url of the .php page or window pop-ups?
Can you help me please?
Thanks
As the bloggers likely have suggested, make the PHP server a REST endpoint and access the data on the blog site with Asynchronous JavaScript and XML. Although today people have tended to scratch the XML part and go with JSON or something.
AJAX is accomplished by using the XMLHttpRequest object.
Mozilla's spec provides links and stuff which will show you how to use it
and w3schools is a good resource.
Then it's all comes down to editing the page directly
element.removeChild(element.lastChild);
element.appendAdjacentHTML('beforeend',xhr.responseText);
Related
I am working on a legacy enterprise application whose code was written in 2001 using a combination of JavaScript, HTML, Intersystems Caché, and Caché Weblink.
This is what exists in index.html for the web app:
<HTML>
<HEAD>
</HEAD>
<FRAMESET ROWS="32,*" FRAMEBORDER="no" border="0" framespacing="0">
<FRAME
SRC="sysnav.html"
NAME="sysnav"
SCROLLING="no"
MARGINHEIGHT="10"
MARGINWIDTH="10"
NORESIZE>
<FRAME
SRC="cgi-bin/nph-mgwcgi?MGWLPN=dev&wlapp=SYSTEM&SystemAction=DisplayContentFrame"
NAME="content"
SCROLLING="auto"
MARGINHEIGHT="0"
MARGINWIDTH="10">
</FRAMESET>
<noframes>
</noframes>
</HTML>
The problem that I have is that in the content frame, the HTML for that frame is automatically generated every single time, but I need to include jQuery in the frame.
Is there any hack/workaround I can do to shove jQuery into the content frame?
As was alluded to in comments, jQuery could be injected into the frame as long as the frame is on the same domain.
Vanilla Javascript
A script tag like the one below could be added to the <head> element of index.html. It waits until the content frame has been loaded via addEventListener() and then dynamically adds a <script> tag with the src attribute pointing to the jQuery code hosted by the Google Hosted Libraries.
<script type="text/javascript">
window.addEventListener('DOMContentLoaded', function() {
frames['content'].addEventListener('load', function() {
var contentFrameHead = frames["content"].document.getElementsByTagName("head")[0];
var newScriptTag = document.createElement('script');
newScriptTag.src = 'https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js';
contentFrameHead.appendChild(newScriptTag);
});
});
</script>
See it demonstrated in this plunker example. Try clicking the button labeled Test jQuery Loaded in this frame? and see how the result changes when commenting line 10 of index.html.
Utilizing jQuery in index.html
Maybe it would be too much overhead, but if jQuery was added to index.html, jQuery helper functions could be used. I attempted to utilize those to shorten the code but ran into an issue while attempting to create the script tag using $() - refer to this answer for a detailed explanation of why that won't work.
So the code utilizing jQuery helper functions isn't much shorter...
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>-->
<script type="text/javascript">
$(function() { //DOM-ready
$(frames['content']).on('load', function() { //load for content frame
var newScriptTag = document.createElement('script');
newScriptTag.src = 'https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js';
var contentFrameHead = frames["content"].document.getElementsByTagName("head")[0];
contentFrameHead.appendChild(newScriptTag);
});
});
If content frame has a different domain
Otherwise, if the domain of the content frame is a different domain than that of index.html, then a server-side script (e.g. using PHP with cURL, nodeJS, etc.) might be necessary to fetch the content of that page and include the jQuery library (which itself might be cumbersome).
No, but you can create a new page and include that in the src. Yes it is ugly, but it could work in some cases.
include jquery in the new page, and include the old page in the new page.
I have a javascript kind of feed, its more like a widget which displays dynamic content (that content is syndicated from other site).
This is what I have:
<div id="previewWidget"></div>
<script type="text/javascript" src="https://api.something/hlwidgetcommon.js">
<script type="text/javascript" src="https://api.something/hlwidgetcommon.js"></script>
<script type="text/javascript" src="http://api.something/latestDiscussion.js"></script>
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function() {
hl.latestDiscussion('previewWidget', {
discussionKey:'d06c3624-210e3-4a2b-a303-003f7ed66e038', <---------- random letters
maxToRetrieve:'3',
subjectLength:'50',
contentLength:'160',
moreUrl:'https://www.something.com',
showLoginStatus:'0',
loginUrl:'https://www.something.com',
domainUrl:'https://www.something.com',
cbUseBioBubble:'0',
includeStaff:'1',
HLIAMKey:'d06c3624-210e3-4a2b-a303-003f7ed66e038' <---------- more random letters
});
});
</script>
(http://www.pastebin.ca/3030247)
What I would like to do is that each link that feed generates is opened in a new tab.
There is no <a href="#"> for me to go and add target=_blank.
Example:
This is what the feed generates (its a forum feed):
http://imgur.com/iQ45OtK
Probably the easiest solution: if you have any <a> elements within your feed, then you can easily give them target="_blank" via JS. If using jQuery, you might use this bit of JS, for instance:
$("#previewWidget a[href]").each(function() {
$(this).attr("target","_blank");
});
If you are looking to scan the text of each post for URLs, then you could wrap those URLs with <a target="_blank"> elements. For more info, see this post, as it's a bit complicated to detect URLs accurately with JS.
Unfortunately, opening links in a new tab using Javascript is unreliable because this comes down to browser configuration issues - often you will be caught in a pop-up blocker. See this post for more detail.
I have a page which has an iframe embed of an external page. I want to find zip code
Here is my iframe:
<iframe src="http://mortgagerates.icanbuy.com/?zip=" width="1020" height="1200">
http://mortgagerates.icanbuy.com/?zip=10458 (Main Site )
But i want i frame and my browser url same below:
http://www.mysite.com/?zip=10458 (I want something like that)
Is this possible in wordpress? how?
Please check it.. I hope work it...
<iframe src="http://mortgagerates.icanbuy.com/?zip" width="1020" height="1200" class="iframe-wrapper">
And add this jQuery. Thats It!
<script type="text/javascript">
$(function() {
var search = window.location.search;
search = search.replace("?","&");
$(".iframe-wrapper").attr("src", $(".iframe-wrapper").attr("src")+search);
});
</script>
This is ajax page. you want to use ajax.
http://mortgagerates.icanbuy.com/ajax/rates-search?callback=jQuery17209362620610679678_1385958692723&source=1&results_count=0&period=PERIOD_FIXED_30YEARS&state=33&property_type=34&occupancy=49&fico=740&points=1.5¤tly_working=Yes&property_interested=Yes&show_fha=0&cashout=0&city=10458&valoans=0&militaryaff=1&hadvabefore=0&rate_lock=99&loan=200000&transaction=54<v=80&cltv=80&DO_UPDATE_WRITE=0&id=d4ea9f8db0477778&external=0&_=1385958692873
you need to pass your zipcode into city=10458. its return json encoded format. you simply parse this into your design.
I would like to redirect to a different page if the referrer matches the loaded website. I want to do this because I run a php rotator script running simultaneously on several websites. But IF I have site A being advertised on sites A B C D, I would like site A to show only if the referrer matches site B C or D or not to show if referrer matches site A. This is to prevent showing the same website on itself.
The script is a php script loaded in an iframe. It doesn't have referrer cloaking or anything like that. I can include any javascript or php in the rotator script.
Any ideas or pointers would be appreciated. Thank you!
sorry, this is a little long, but I want to make sure this is well answered.
Let's be clear and use consistent terminology to make sure we're on the same page here:
redirect means to capture the request for the current page and point it at a different page.
For example:
typing "http://gooogle.com" into your address bar will perform a redirect to "http://google.com"
There are multiple kinds of redirects, we'll not got into them here.
referer indicates the URI that linked to the page being requested, as pulled from the HTTP headers
For example:
You're on the page "http://slate.com"
You click a link that leads you to "http://newsweek.com"
your referer is "http://slate.com" in this case.
A redirect may modify the value of the referer, depending on the type of redirect.
In order to accomplish what you wish: to not display an ad in an iframe for the page you are currently on, you are not actually concerned about either of these. You don't need any redirection, and you don't need to be concerned about who linked to the current page.
Consider how your page works:
There is a javascript that executes on page load that inserts an iframe into your document.
That iframe, in turn, loads the PHP file on the server, which displays the ad.
So you have an HTML page that looks something like this:
index.html
<!doctype HTML>
<html>
<head><title>Server A Index</title></head>
<body>
<header>
<section id="top_banner_ad">
<script src="./js/adrotator.js"></script>
</section>
</header>
<!-- Some content... -->
</body>
</html>
Which calls a JavaScript that looks something like this:
/js/adrotator.js
var holder = document.getElementById("top_banner_ad");
var iframe = document.createElement("iframe");
iframe.src = "http://example.com/inc/adrotators.php";
holder.appendChild(iframe);
Which calls, finally, a PHP script that looks something like this:
/inc/adrotators.php
<!doctype HTML>
<html>
<head><title></title></head>
<body>
<?php $advert = get_advert(); ?>
<a href="<?php echo $advert['url']; ?>">
<img src="<?php echo $advert['imgsrc']; ?>">
</a>
</body>
</html>
I'm not sure what you have access to in this scenario, but I'm going to assume you have access to all of these: the page hosting the script (index.html), the javascript that creates the iframe (/js/adrotator.js), and the php script that is called by the iframe (/inc/adrotator.php).
You have at least 2 solutions:
You can either have /js/adrotator.js find out from index.html and tell the /inc/adrotator.php who it is, or you can have /inc/adrotator.php find out who it's parent frame is.
So, the iframe has knowledge of its parent frame (though they can only actually communicate under certain circumstances)
If your iframe loads a page that is on the same domain (subdomains matter), one solution would be to have a javascript in the iframe (in the HTML generated by the PHP) check its parent, like so:
parent.document.location.href
And then request a new ad if the target domain matches the parent.
(preferred) If you can modify the javascript that creates the iframe in your page, then you could have the javascript check the url and add it as a url parameter to the src attribute of the iframe it calls.
For example:
var host_url = window.location.href;
var iframe = document.createElement("iframe");
iframe.src = "http://example.com/ad_rotator.php?host="+ host_url;
document.body.appendChild(iframe);
And then your PHP script would not serve an ad whose target matches $_GET["host"]
<?php
$advert = get_advert();
while ($advert['url'] == $_GET['host']) {
$advert = get_advert();
}
?>
<a href="<?php echo $advert['url']; ?>">
<img src="<?php echo $advert['imgsrc']; ?>">
</a>
all the code here is untested pseudo-code, you will definitely need to modify this, it's just a starter
If you can't modify the PHP that loads the ad, nor can you modify the script that injects the iframe, you're pretty much hosed.
I want javascript to load a html code so it can be embedded in a page, all I get is the raw html code without being compiled.
<script>
document.write('http://www.example.com/index.php?title=Media:Object4&action=raw&ctype=html')
</script>
It contains the html coding inside and I want it to embed in pages so I can share with other websites.
Are you trying to get the HTML from that URL and embed it in the page? JavaScript can't do that for security reasons, but if you're using PHP server-side you can use:
echo file_get_contents("http://..........");
Or you can use an iframe:
<iframe src="http://........" />
The easiest way to make this work, sort of, is by using <iframe>:
<iframe src="http://www.example.com/index.php?title=Media:Object4&action=raw&ctype=html"></iframe>
If you want to load it inside a particular container, you have to perform a web request using JavaScript; jQuery example:
<div id="container"></div>
<script>
$('#container').load('http://www.example.com/index.php?title=Media:Object4&action=raw&ctype=html');
</script>
If the remote URL is not in the same domain, you need to use a proxy:
<script>
$('#container').load('/path/to/myproxy.php', {
url: 'http://www.example.com/index.php?title=Media:Object4&action=raw&ctype=html'
});
</script>
Then your PHP code could look like:
<?php
if (parse_url($_POST['url'], PHP_URL_HOST) === 'www.example.com') {
echo file_get_contents($_POST['url']);
}
document.write - adds text to the document - it does not fetch documents from the web.
However, you can use the object tag.
It should look something like that:
<object type="text/html" data="http://www.example.com/index.php?title=Media:Object4&action=raw&ctype=html" style="width:100%; height:100%"></object>
Additionally, if the page that you are fetching is on the same domain, you can use AJAX to fetch it.