Highlighted

Links keep opening in frame (when using _self)

Contributor ,
May 20, 2019

Copy link to clipboard

Copied

The below code is a sample of how I’ve set up my link buttons in my HTML Canvas file.

I then publish as a OAM file. Then I insert the OAM into Dreamweaver.

Then publish out of Dreamweaver and/or Put up onto the actual server.

Originally the _blank were _self (also tried _parent and _top), all of them (_self, _parent and _top) kept erroneously opening in a frame (image below)?

Why is it behaving like this, when my old SWF site only used _self it worked perfectly (when Flash is enabled of coarse).

_blank is used now only because the others won’t work, but I would like it to behave like it used to, where it would stay on the current window/tab?

What am I doing wrong?

The files I’m using are available for download below.

Thanks.

_self, _parent and _top causes the urls to load in a separate frame?

Screen Shot 2019-05-20 at 22.54.53.png

Sample of my current link setups (originally it was _self😞

//  5.2 PRINT submenu button link

this.nPrint_btn.addEventListener("click", fl_ClickToGoToWebPage0502);

function fl_ClickToGoToWebPage0502() {

window.open("http://solarinkgraphics.com/#printAnchor", "_blank");

};

//  5.3 WEB submenu button link

this.nWeb_btn.addEventListener("click", fl_ClickToGoToWebPage0503);

function fl_ClickToGoToWebPage0503() {

window.open("http://solarinkgraphics.com/#webAnchor", "_blank");

};

//  5.4 ILLUSTRATIONS submenu button link

this.nIllus_btn.addEventListener("click", fl_ClickToGoToWebPage0504);

function fl_ClickToGoToWebPage0504() {

window.open("http://solarinkgraphics.com/#illustrationsAnchor", "_blank");

};

//  6. RATES button link

this.nRates_btn.addEventListener("click", fl_ClickToGoToWebPage06);

function fl_ClickToGoToWebPage06() {

window.open("http://solarinkgraphics.com/rates.html", "_blank");

};

Animate HTML5 Canvas File:

http://solarinkgraphics.com/files/Vrt_FoldOutNavbar_HTML5%20Canvas.fla

Dreamweaver file:

http://solarinkgraphics.com/files/about.html

Hi Derek

try this method:

this.nContact_btn.addEventListener("click", fl_ClickToGoToWebPage07); 

   

function fl_ClickToGoToWebPage07() { 

    window.parent.document.location = "http://solarinkgraphics.com/contact.html"; 

}; 

The essential part is

window.parent.document.location = "NEW URL";

<object> data is embedded in a frame, we know that now. A frame is a window with an autonomous document.

Ergo: We reference this starting with window.

The parent of a window is the next higher window object in the Document Object Model (DOM), in your case that's the main brower window.

Ergo: We reference that one with window.parent.

The document is the current HTML document in our main browser window.

Ergo: We target that with window.parent.document.

And lastly location is the URL of that document we would like to swap.

Ergo: window.parent.document.location = "NEW URL";

I tested this and it works. Hope it does it for you as well.

Klaus

TOPICS
Discussions

Views

1.1K

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Links keep opening in frame (when using _self)

Contributor ,
May 20, 2019

Copy link to clipboard

Copied

The below code is a sample of how I’ve set up my link buttons in my HTML Canvas file.

I then publish as a OAM file. Then I insert the OAM into Dreamweaver.

Then publish out of Dreamweaver and/or Put up onto the actual server.

Originally the _blank were _self (also tried _parent and _top), all of them (_self, _parent and _top) kept erroneously opening in a frame (image below)?

Why is it behaving like this, when my old SWF site only used _self it worked perfectly (when Flash is enabled of coarse).

_blank is used now only because the others won’t work, but I would like it to behave like it used to, where it would stay on the current window/tab?

What am I doing wrong?

The files I’m using are available for download below.

Thanks.

_self, _parent and _top causes the urls to load in a separate frame?

Screen Shot 2019-05-20 at 22.54.53.png

Sample of my current link setups (originally it was _self😞

//  5.2 PRINT submenu button link

this.nPrint_btn.addEventListener("click", fl_ClickToGoToWebPage0502);

function fl_ClickToGoToWebPage0502() {

window.open("http://solarinkgraphics.com/#printAnchor", "_blank");

};

//  5.3 WEB submenu button link

this.nWeb_btn.addEventListener("click", fl_ClickToGoToWebPage0503);

function fl_ClickToGoToWebPage0503() {

window.open("http://solarinkgraphics.com/#webAnchor", "_blank");

};

//  5.4 ILLUSTRATIONS submenu button link

this.nIllus_btn.addEventListener("click", fl_ClickToGoToWebPage0504);

function fl_ClickToGoToWebPage0504() {

window.open("http://solarinkgraphics.com/#illustrationsAnchor", "_blank");

};

//  6. RATES button link

this.nRates_btn.addEventListener("click", fl_ClickToGoToWebPage06);

function fl_ClickToGoToWebPage06() {

window.open("http://solarinkgraphics.com/rates.html", "_blank");

};

Animate HTML5 Canvas File:

http://solarinkgraphics.com/files/Vrt_FoldOutNavbar_HTML5%20Canvas.fla

Dreamweaver file:

http://solarinkgraphics.com/files/about.html

Hi Derek

try this method:

this.nContact_btn.addEventListener("click", fl_ClickToGoToWebPage07); 

   

function fl_ClickToGoToWebPage07() { 

    window.parent.document.location = "http://solarinkgraphics.com/contact.html"; 

}; 

The essential part is

window.parent.document.location = "NEW URL";

<object> data is embedded in a frame, we know that now. A frame is a window with an autonomous document.

Ergo: We reference this starting with window.

The parent of a window is the next higher window object in the Document Object Model (DOM), in your case that's the main brower window.

Ergo: We reference that one with window.parent.

The document is the current HTML document in our main browser window.

Ergo: We target that with window.parent.document.

And lastly location is the URL of that document we would like to swap.

Ergo: window.parent.document.location = "NEW URL";

I tested this and it works. Hope it does it for you as well.

Klaus

TOPICS
Discussions

Views

1.1K

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
May 20, 2019 0
Advocate ,
May 21, 2019

Copy link to clipboard

Copied

Hi Derek

According to the source code of your 'Dreamweaver file' your Animate Canvas file isn't located in a frame (like in iframe), it is put into an <object> element by Dreamweaver.

<div id="aboutHead">

  <object id="EdgeID2" type="text/html" width="602" height="260" data-dw-widget="Edge" data="animation_assets/about_HTML5 Canvas/Assets/about_HTML5 Canvas.html">

  </object>

</div>

An <iframe> is its own window object and target attributes like _self, _parent or _top would make sense. An <object> element on the other hand is no window object and, anyway, I don't get your statement:

     Originally the _blank were _self (also tried _parent and _top), all of them (_self, _parent and _top) kept erroneously opening in a frame (image below)?

What are you talking about? In your above HTML document there's nothing being either a Frameset/frame (forget this immediately it's depricated in HTML5 since years) or iframe. I guess that all ill effects which look like 'opening in a frame' are actually caused by CSS positioning problems.

However, I had to add forward slashes to your data links in order to see your objects respectively Animate Canvas creations. Like in

data="/animation_assets/about_HTML5 Canvas/Assets/about_HTML5 Canvas.html"

And if you want to open other HTML documents triggered by pressing your Animate/Canvas buttons use instead of window.open

function fl_ClickToGoToWebPage06() { 

    window.href.location = "http://solarinkgraphics.com/rates.html";

}; 

if you really want to open it in the same and one and only window you have.

Klaus

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 21, 2019 0
Contributor ,
May 21, 2019

Copy link to clipboard

Copied

Okay I hear what you’re saying.

This has nothing to do with frames and is most likely caused by Animate button coding, i.e. window.open(url), or Dreamweavers <object> tag.

I attempted your suggestions, coding my Animate HTML5 buttons like so:

this.nContact_btn.addEventListener("click", fl_ClickToGoToWebPage07);

function fl_ClickToGoToWebPage07() {

window.location.href = "http://solarinkgraphics.com/contact.html";

};

But the same issue continues, where it’s opening in a mini window, within the current window, with its own scrollbars and everything (Isn’t that how frames behave? If it’s not a frame then what is it? Or what is behavior like this called?).

Then I attempted changing Dreamweavers <object> tag containing the HTML5 Canvas animation composition to a <div> with no success, this time it simply didn’t appear on the published page.

I can’t find anywhere else that has my exact issue either.

My old site worked perfectly with a simple SWF, with basic URL coding. And now there's all this complication for something as simple as navigating to a URL.

So now I have to become a javascript expert to accomplish the simplest task in website building.

Sorry guys, I’m just frustrated with all this.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 21, 2019 0
Contributor ,
May 21, 2019

Copy link to clipboard

Copied

Chrome is calling it a frame btw (image 1 below).

I was able to left click (contextual menu) this after left clicking initially and selecting Hide This Plugin (image 2 below).

You’re right, there’s no coding in my HTML or Animate HTML5 pointing or mentioning frames, but these links are turning up in frames for some reason.

1.

Screen Shot 2019-05-21 at 22.05.44.png

2.

Screen Shot 2019-05-21 at 22.08.19.png

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 21, 2019 0
Advocate ,
May 22, 2019

Copy link to clipboard

Copied

Hi Derek

You are right: A HTML document via a data link in an <object> element is recognized as a frame in Firefox too. I wasn't aware of that so far.

I have to think about your issue again under this assumption, perhaps even build a test case and will come back to you.

Klaus

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 22, 2019 0
Contributor ,
May 22, 2019

Copy link to clipboard

Copied

One thing I’m going to try later on, is inserting the HTML from Adobe Animate’s published HTML file, which is entirely separate from Dreamweaver’s HTML file. Involving placing certain Animate derived HTML attributes/properties/values into the starting <body … > tag, as well as the actual Animate coding into the <body> … </body> itself. Along with dropping Animate’s generated JS file into the directory the dreamweaver HTML files are held in. I went that route previously, before learning about about OAM. There were some positioning issues, but I may be able to sort that out easily now, after experience with the OAM insertion in Dreamweaver.

The whole point being that, I believe the above approach doesn’t contain the <object> tag within Animate‘s derived HTML file.

Up until this point I’ve been inserting an OAM file from Animate into Dreamweaver. Which I thought would be more straightforward and lead to optimum results, but it turns out it may have some drawbacks when it comes to URL links, apparently caused by this <object> tag.

More to come later.

Thanks for your continued help with this. I really appreciate it.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 22, 2019 0
Advocate ,
May 22, 2019

Copy link to clipboard

Copied

Hi Derek

try this method:

this.nContact_btn.addEventListener("click", fl_ClickToGoToWebPage07); 

   

function fl_ClickToGoToWebPage07() { 

    window.parent.document.location = "http://solarinkgraphics.com/contact.html"; 

}; 

The essential part is

window.parent.document.location = "NEW URL";

<object> data is embedded in a frame, we know that now. A frame is a window with an autonomous document.

Ergo: We reference this starting with window.

The parent of a window is the next higher window object in the Document Object Model (DOM), in your case that's the main brower window.

Ergo: We reference that one with window.parent.

The document is the current HTML document in our main browser window.

Ergo: We target that with window.parent.document.

And lastly location is the URL of that document we would like to swap.

Ergo: window.parent.document.location = "NEW URL";

I tested this and it works. Hope it does it for you as well.

Klaus

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 22, 2019 0
Adobe Community Professional ,
May 22, 2019

Copy link to clipboard

Copied

kdmemory  wrote

<object> data is embedded in a frame, we know that now.

An iframe, not a frame. Frames are significantly different, and have been deprecated for years.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 22, 2019 0
Advocate ,
May 22, 2019

Copy link to clipboard

Copied

Hi Clay

In this thread we are using the terms iframe and frame as synonyms for the same thing: iframe. In the same sense as Firefox in the context menu says: This Frame > Reload Frame. The other thing with <frameset><frame> is understood.

Klaus

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 22, 2019 0
Adobe Community Professional ,
May 22, 2019

Copy link to clipboard

Copied

kdmemory  wrote

The other thing with <frameset><frame> is understood.

You've been reading these forums long enough to know that you should never make that assumption.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 22, 2019 0
Contributor ,
May 22, 2019

Copy link to clipboard

Copied

Still no success. Even with your last suggested snippet.

The main attempts made are listed below.

In addition to attempting shortening the targeting:

window.parent.location

window.parent.

Everything failed. Nothing even navigated anywhere. The buttons just rolled over but clicking on them does nothing.

You mentioned this working for you, was it via an OAM file brought into Dreamweaver, or were the conditions different somehow?

I even attempted searching for getting rid of iframes/frames via javascript. Attempted a few within Animate project and within the Dreamweaver HTML page and it all failed or removed everything entirely, except the background.

But yeah, I’m at my wits end, which wasn’t lengthy to begin with. Ha. Smh.

This code failed to even navigate.

//  4. RESUME button link

this.nResume_btn.addEventListener("click", fl_ClickToGoToWebPage04);

function fl_ClickToGoToWebPage04() {

window.parent.document.location = "http://solarinkgraphics.com/resume.html";

};

Previous snippet with “.href” added.

//  4. RESUME button link

this.nResume_btn.addEventListener("click", fl_ClickToGoToWebPage04);

function fl_ClickToGoToWebPage04() {

window.parent.document.location.href = "http://solarinkgraphics.com/resume.html";

};

Code placed in a failed attempt to remove iframe (with window.open(URL); method).

document.querySelectorAll('iframe').forEach(

  function(elem){

    elem.parentNode.removeChild(elem);

});

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 22, 2019 0
Advocate ,
May 23, 2019

Copy link to clipboard

Copied

Hi

I've put my test project on CC for you to check out.

I didn't use an OAM and Dreamweaver. It's all hand-coded. I'm not a friend of Dreamweaver or any WYSIWYG kind of tool. And I'm not sure which mess Dreamweaver puts into your <object> elements that a relative straightforward method like

window.parent.document.location = "NEW URL";

doesnt work. It definitely does in my setup.

Screenshot 2019-05-23 at 11.16.37.png

On index.html there are two Animate buttons, one in an <object>, the other one in an <iframe>. Both Animate buttons are the same file and in both the link into a fresh window works.

But if you test locally by double-clicking the index.html to open in Google Chrome, this doesn't work for me. The whole project needs to be running on a web server. In Firefox it works locally too.

Klaus

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 23, 2019 2
Advocate ,
May 23, 2019

Copy link to clipboard

Copied

And here is the link to a web server installation:

https://testline.memetic-tv.net/adobe_forum/derek/

Klaus

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 23, 2019 0
Contributor ,
May 23, 2019

Copy link to clipboard

Copied

That was the key. SMH. HA.

You did it man. Good god-@#$%&! job!

What’s funny, is the previous night I was uploading (i.e. the Put command, ⇧⌘U) files up via Dreamweaver, to test online in and of itself, constantly. During those failed scenarios.

But last night, I was certain that if it didn’t work locally it wouldn’t work online as well, and man was I mistaken.

Thanks a ton man. I really appreciate it.

Man, now I can continue converting my old SWF to HTML5 compliance.

Hopefully in peace, and with less aggravation.

It sucks that Dreamweaver’s local testing, whether it be dropping and dragging the HTML file onto the browser (the same as contextual menu clicking the title bar within Dreamweaver), which I tend to prefer to the alternative of Real-tIme Preview, which is excruciatingly slow, and funny enough in the last test, failed to even load the Animate Composition altogether (even after subsequent reloads). SMH.

I don’t know if there are ways to alleviate that, cause local testing should be reliable.

Alright rant ended.

In any case, thanks dude. If I could make you a lord and give you lands I would. Cheers.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 23, 2019 1
Advocate ,
May 23, 2019

Copy link to clipboard

Copied

Hi, thanks for your lovely wishes.

Just to make that sure: It is not DW which is responsible for the failing local tests. It's the browser's security (sandbox) mechanisms to avoid an illegal access to  user's locale systems through JS.

Tip: Install a locale server like XAMPP.

Klaus

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 23, 2019 0
Contributor ,
May 23, 2019

Copy link to clipboard

Copied

So I need to study up on HTML5/JS DOM and local browser behavior (locally and live). Those seemed central to the solution.

I browsed around WC3, but I never walked away with a clear idea of what to do next.

Where does a noob learn all of this, in a clear straightforward way, that gets someone up and solving problems when encountered, or at least gives you a clear map, or hierarchy of how parts of a coding environment work and how they’re connected, and the dynamics of their relationships. What affects what, etc. Or a least where to turn, to reference the parts of a project or website, when parts aren’t working.  

I started the SoloLearn app, focusing on javascript. In order to one day not have to lean so hard on forums, and to be a little more self reliant.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 23, 2019 0
Contributor ,
May 24, 2019

Copy link to clipboard

Copied

I tested with Xampp and it still wasn’t working.

It seems like it’s mainly for testing PHP.

At any rate, I’ll just upload to the internet for testing.

Screen Shot 2019-05-24 at 16.11.34.png

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 24, 2019 0
Advocate ,
May 25, 2019

Copy link to clipboard

Copied

You might have installed XAMPP, the screenshot looks like you still load the page under the file:/// protocol, though.

Screenshot 2019-05-25 at 13.38.19.png

One can see that from the URL-bar: It says File | /Users/nealdereklawson/...

If your page would really run from the local XAMPP server, the URL should start with localhost: and not with a file path.

You must start the XAMPP server first and then load your document with (perhaps):

localhost:solarink/about.html

or

localhost:8888/solarink/about.html

I'm not sure. I admit I recommended XAMPP because it seemed most popular here in the forum. I let myself manipulate.

i had a look at the XAMPP website to find some instructions for you to follow. No luck, only guides like how to e.g. Host your Application in the Amazon Cloud with XAMPP and Bitnami. Highly fascinating but I hoped to give you a simple local web server.

Personally I run a MAMP local server since .. ages. Here I could give you some tips, how e.g. to set up virtual hosts for a variety of projects you are working on.

MAMP PRO can do that by default, but also the free MAMP is capable to do so by manually editing the Apache httpd.conf.

Klaus

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 25, 2019 0
kdmemory LATEST
Advocate ,
May 25, 2019

Copy link to clipboard

Copied

https://forums.adobe.com/people/neal+derekl34934377  wrote

Where does a noob learn all of this,

Well, step by step by step - unless you are like DATA from Startrek, wo could input the knowledge of an entire planet in a matter of milliseconds.

K

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 25, 2019 0